jQuery, la famosa librería de javascript, tiene una gran cantidad de animaciones para conseguir efectos visuales.

Muchas de ellas se pueden imitar con CSS y sus transiciones.

Pero hay un problema para efectuar una de las más famosas (slideToggle): los navegadores no nos dejan animar la propiedad height al valor auto (símplemente no mostrarán la animación).

Ejemplo:

Nótese que no funcionará. Para clarificar no he usado prefijos en las transiciones.

<style>
	.description {
		height: 0; /*Le damos una altura igual a 0*/
		overflow: hidden; /*Evitamos que se vea*/
		transition: height .7s; /*Recuerda usar los prefijos*/
	}
	.toggle:hover + .description {
		height: auto;
	}
</style>
<h3 class="toggle">El título (pasa el ratón por encima)</h3>
<p class="description">Ésta es la descripción</p>

El título (pasa el ratón por encima)

Ésta es la descripción (algo alargada por los propósitos de la demo). No deberías ver la transición
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam magna neque, pulvinar et hendrerit eu, fermentum eget velit. Pellentesque et aliquam libero. Aenean tincidunt odio a purus lobortis interdum. Fusce sed libero eget dui elementum commodo. Vivamus at mauris vitae libero sodales pretium sit amet a neque.

La solución: usar max-height

Si usas un max-height: 0 para ocultarlo, y lo animas a uno lo suficientemente grande para que no tenga condflictos, el elemento no se expandirá más de lo necesario

<style>
	.description {
		max-height: 0;
		overflow: hidden;
		transition: max-height 1.2s;
		/*Tened en cuenta que es el tiempo que tardará en animar a los 400px*/
	}
	.toggle:hover + .description {
		max-height: 400px; /*En este caso valdrá con eso, en otros puede variar*/
	}
</style>
<h3 class="toggle">El título (mantén el ratón por encima)</h3>
<p class="description">Ésta es la descripción</p>

El título (mantén el ratón por encima)

Ésta es la descripción (algo alargada por los propósitos de la demo). Deberías ver la transición
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam magna neque, pulvinar et hendrerit eu, fermentum eget velit. Pellentesque et aliquam libero. Aenean tincidunt odio a purus lobortis interdum. Fusce sed libero eget dui elementum commodo. Vivamus at mauris vitae libero sodales pretium sit amet a neque.

Uso práctico

Recientemente lo usé para estilizar un buscador personalizado (para mostrar un párrafo de texto cuando pasas el ratón por encima del título), pero seguro que se os ocurren mejores formas de usarlo ;).

8 pensamientos en “Slidetoggle sólo con css

  1. Bitacoras.com
  2. Imagen de DavidDavid el dijo:

    Hola. Muy bueno el blog. Todo muy útil. Me gustaría preguntarte, ¿cómo consigues el delay en el toggle? Al abrirse, lo hace rápidamente, pero cuando apartas el :hover vuelve a los pocos segundos…

    :-V

    ¡Gracias!

    • Imagen de Emilio Cobos Álvarez el dijo:

      Es fácil: lo que animas es la propiedad max-height, no realmente height.

      Imagina que hay un elemento que mide 100px de alto, el valor que le das de max-height para hacer el efecto es 200px, y el tiempo de la transición es 1 segundo. Vamos a suponer que es una transición linear para no complicar las cosas.

      En realidad, en animar la altura estás tardando medio segundo (hasta que max-height llega a 100px), y hay otro medio que la anima, pero de forma invisible (no lleva a cabo ningún efecto real).

      Igualmente, cuando quites el ratón, habrá medio segundo de delay (en lo que anima max-height de 200 a 100px) y otro medio segundo de animación en sí.

      Espero que te haya aclarado la duda ;)

  3. Imagen de DavidDavid el dijo:

    ¡Buen detalle! Pensaba que al darle max-height animaría hasta el tope de píxels visibles (donde termine el contenido del div) y no que lo animaría por completo, es curioso como trabaja esa propiedad.

    ¡Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.