En previos artículos, casi siempre hemos utilizado librerías de terceros para implementar diversos elementos de nuestra web. Esta vez lo implementaremos nosotros desde cero.

Se trata de un elemento muy usual en las web, donde al pulsar en un determinado sitio, barra, botón, etc, se expande más información relacionada que previamente estaba oculta, lo que se conoce como estilo acordeón. Muy parecido a lo que hace la librería Jquery UI y sus accordions https://jqueryui.com/accordion/

Para implementar este interesante elemento utilizaremos la librería de javascript Jquery, html y css.

Este sería el resultado final:

Es muy sencillo de implementar. Sólo debemos saber lo básico de html, css, y un poco de las animaciones de jquery.

Como hacer un Acordeón con HTML, CSS y Javascript (Jquery)

Codigo HTML:

Codigo CSS:

Como vemos en el código HTML, tenemos dos contenedores <div> con clase accordion-container,  que contendrán toda la información de ese ítem, característica, sección, etc. En concreto tenemos un elemento <a> que representa el título, y es la barra horizontal con el nombre del jugador, y otro elemento div con clase accordion-content que en principio está oculta y que contiene una imagen del jugador y texto.

En este ejemplo se trata de un listado con dos jugadores, que al hacer click en cada uno de ellos se expande información relacionada. Si nos fijamos, también se cambia el icono de la derecha de la barra con “+” y “-“según este cerrado o abierto, esto lo logramos con código css.

Por último, queda lo más importante, implementar mediante jquery la acción de hacer click en la barra de título y como consecuencia se visualice u oculte la información según se encuentre visible o no el contenedor de información .accordion-content”

Codigo Jquery:

En primer lugar guardamos en la variable “contenido” el objeto div que contiene la información, en este caso de uno de los jugadores, según donde hayamos pulsado, a través de la función next(), que coge el primer elemento hermano con clase .accordion-content

Seguidamente comprobamos si está oculto o no, y dependiendo del caso mostramos u ocultamos a través de dos funciones de jquery, con el objetivo de que el cambio no se produzca de forma brusca, sino animada.

slideDown() => Muestra el contenido de forma animada (slide).

slideUp() => Esconde el contenido de forma animada (slide).

Así de fácil es implementar nuestra propio estilo acordeón sin tener que recurrir a librerías externas como Jquery UI.