Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Cómo Crear un Componente de Acordeón con CSS y un Toque de JavaScript

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En el tutorial de hoy, aprenderemos a crear un componente “muestra/oculta” con CSS y un poco de JavaScript. Por defecto, jQuery ofrece el método slideToggle que nos permite crear acordeones con un movimiento deslizante. Nuestro reto es imitar esta funcionalidad con puro JavaScript.

Aquí está el componente que crearemos:

Nota: esta es una funcionalidad proporcionada de manera nativa por los elementos details y summary, aunque estos no cuentan todavía con soporte en los navegadores de Microsoft.

1. El HTML

Para comenzar, definimos un elemento con la clase de container que contiene dos subelementos:

  • el botón que ocultará y mostrará el contenido (incluido un icono de SVG en línea)
  • el contenido real

Aquí está como se ve:

2. El CSS

El CSS es muy sencillo. Necesitamos definir dos clases de ayuda (es decir, hide y show).

Para ocultar y mostrar el elemento objetivo, usaremos la propiedad height, pero no especificaremos sus valores en CSS. En cambio, ajustaremos dinámicamente los valores de la altura a través de JavaScript.

Una cosa a considerar es que no usamos la propiedad display para alternar la visibilidad de nuestro contenido. Esa propiedad no se cuenta entre las propiedades animatable de CSS.

Aquí están los estilos de CSS correspondientes:

3. El JavaScript

Ahora es momento de discutir cómo debería funcionar nuestro código JavaScript.

Primero, tan pronto como el DOM esté listo, obtenemos la altura del elemento .info y luego ajustamos inmediatamente su valor a 0.

Ten en cuenta que, dependiendo de tu contenido (por ejemplo, si incluye imágenes), puede que tengas que incluir el código anterior dentro del evento load.

Luego, cuando se hace clic en el botón .toggle-btn, hacemos lo siguiente:

  • Alterna la visibilidad de los elementos .less y .more.
  • Recalcula la altura del elemento .info. Si es 0 (inicialmente le damos este valor), eso significa que el contenido está oculto, así que lo revelaremos ajustando su altura igual a su altura inicial (almacenada en la variable infoHeight). Por otro lado, si el contenido está visible, lo ocultamos ajustando su altura a 0.
  • Opcionalmente, nos aseguramos que el .toggle-btn se hará clic una sola vez hasta que finalice la animación del deslizamiento (dura 500 ms).

Aquí está el código que implementa todo ese funcionamiento:

Tamaño del Navegador

El siguiente paso es asegurarte que el componente funcionará correctamente a medida que la ventana del navegador cambia su tamaño.

Aquí está el código de JS necesario:

4. Soporte del Navegador

Nuestra demostración debería trabajar bien en todos los navegadores y dispositivos recientes. Además, como siempre, utilizamos Babel para compilar el código ES6 a ES5.

Conclusión

En este breve tutorial creamos un componente “muestra/oculta” estilo acordeón con CSS y JavaScript. Gracias a la propiedad height animable, conseguimos añadir un efecto slide-in/slide-out a nuestro componente.

En particular, no hemos considerado la accesibilidad, por lo que si quieres mejorar su funcionalidad, sin duda podría ser el siguiente paso.

Más Tutoriales “Con un Toque de JavaScript”


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.