Agregar transición CSS3 expandir / contraer

Esto debería funcionar, tuve que intentarlo un rato también.. : D

Css3 animación jsfiddle

Http://jsfiddle.net/Bq6eK/215 /

Yo no modificar el código para esta solución, yo escribí mi propio lugar. Mi solución no es exactamente lo que pidió, pero tal vez podría construir sobre ella con el conocimiento existente. Comenté el código también para que sepas exactamente lo que estoy haciendo con los cambios.

Como una solución para "evitar establecer la altura en JavaScript", acabo de hacer 'maxHeight' un parámetro en la función JS llamado toggleHeight. Ahora se puede configurar en el HTML para cada div de clase ampliable.

Diré esto por adelantado, no tengo mucha experiencia con los idiomas del front-end, y hay un problema en el que necesito hacer clic en el botón 'Mostrar/ocultar' dos veces inicialmente antes de que comience la animación. Sospecho que es un problema con enfoque.

El otro problema con mi solución es que en realidad puede averiguar cuál es el texto oculto sin presionar el botón mostrar / ocultar simplemente haciendo clic en el div y arrastrando hacia abajo, puede resaltar el texto que no es visible y pégalo en un espacio visible.

Mi sugerencia para un siguiente paso sobre lo que he hecho es hacer que el botón mostrar/ocultar cambie dinámicamente. Creo que puedes averiguar cómo hacer eso con lo que ya pareces saber sobre mostrar y ocultar texto con JS.

Aquí hay una solución que no usa JS en absoluto. Utiliza casillas de verificación en su lugar.

Puede ocultar la casilla de verificación agregando esto a su CSS:

.container input{
    display: none;
}

Y luego agrega un poco de estilo para que parezca un botón .

Aquí está el código fuente que modded.

OMG, traté de encontrar una solución simple para esto durante horas. Sabía que el código era simple, pero nadie me proporcionó lo que quería. Así que finalmente se puso a trabajar en algún código de ejemplo e hizo algo simple que cualquiera puede usar no requiere jQuery. Javascript simple y css y html. Para que la animación funcione, debe establecer la altura y el ancho o la animación no funcionará. Lo descubrí por las malas.

<script>
        function dostuff() {
            if (document.getElementById('MyBox').style.height == "0px") {

                document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 200px; width: 200px; transition: all 2s ease;"); 
            }
            else {
                document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 0px; width: 0px; transition: all 2s ease;"); 
             }
        }
    </script>
    <div id="MyBox" style="height: 0px; width: 0px;">
    </div>

    <input type="button" id="buttontest" onclick="dostuff()" value="Click Me">