Crear un acordeón con HTML5, CSS3 y jQuery

Una situación que se presenta con bastante frecuencia durante el desarrollo de un proyecto web es cuando necesitamos mostrar mucha información (texto, imágenes, videos, etc.), pero disponemos de poco espacio y no deseamos distorsionar el diseño o la maquetación del sitio web.

Una solución básica muy útil consiste en mostrar el contenido en bloques que se despliegan verticalmente, lo que se conoce como efecto acordeón. A continuación explicaré un método muy sencillo de cómo crear un acordeón con HTML5, CSS3 y jQuery.

En primer lugar, definiremos el código HTML. Empezamos con una etiqueta <section class="accordion"> que contiene un título <h1> y tres etiquetas <article>, cada una de las cuales contiene un título <h2> y un bloque <div class="block"> con el contenido que deseamos ocultar o mostrar.

<body>
<section class="accordion"> <h1>Accordion with HTML5, CSS3 and jQuery</h1> <article> <h2>Lorem ipsum dolor</h2> <div class="block"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, omnis, quos, quaerat sit ab doloribus autem minima neque vitae minus iusto vel harum impedit optio ratione quod dignissimos necessitatibus tempora suscipit porro. Eum, fugiat, eligendi, pariatur molestiae consequatur voluptate ipsa dolor debitis iste dicta rerum ullam est dolorem ipsam voluptates.</p> </div> </article> <article> <h2>Voluptatem ullam</h2> <div class="block"> <p>Consequuntur, quo, distinctio, assumenda fugiat placeat corporis accusamus culpa cupiditate ratione deserunt explicabo autem recusandae totam aspernatur iste voluptatibus ab aliquid atque fuga ex temporibus optio officia deleniti cum maiores nam exercitationem neque facilis molestiae ducimus. Voluptatem ullam quas eveniet eum aut!</p> </div> </article> <article> <h2>Laborum aperiam</h2> <div class="block"> <p>Commodi, dignissimos, blanditiis, consequuntur, at ullam porro mollitia nisi neque iste quisquam cupiditate perferendis voluptatem ab hic earum nam eveniet? Sunt, laborum aperiam quae aliquam dolore doloribus iure possimus est sit nihil voluptate similique quibusdam explicabo aut ab earum non cum repellendus.</p> </div> </article> </section>
</body>

Ahora, el objetivo es mostrar sólo los títulos <h2> y ocultar los bloques <div class="block"> de manera tal que cuando hagamos clic sobre un título <h2> se despliegue verticalmente hacia abajo el contenido del bloque <div class="block">. Para lograr esto, hacemos uso de la siguiente función jQuery.

01 $(function(){
02   $('.block').hide();
03   $('.accordion h2').on('click',function(){
04     if($(this).next().is(':visible')){
05       $(this).next().slideUp();
06     }
07     if($(this).next().is(':hidden')){
08       $('.accordion h2').next().slideUp();
09       $(this).next().slideDown();
10    }
11   });
12 })

Expliquemos qué cosa hace esta función.

  • Línea 02: Ocultamos el contenido de todos los bloques <div class="block">.
  • Línea 03: Definimos qué sucede cuando hacemos clic sobre el título <h2>.
  • Línea 04: Si el contenido del bloque ya está visible,
  • Línea 05: entonces se ocultará deslizándose hacia arriba.
  • Línea 07: Si el contenido del bloque está oculto,
  • Línea 08: ocultamos el contenido del bloque que se encuentre visible deslizándolo hacia arriba y
  • Línea 09: mostramos el contenido del bloque seleccionado deslizándolo hacia abajo.

Ya tenemos nuestro acordeón completamente operativo y sólo falta definir los estilos para mejorar el aspecto visual.

body {
  background: gray;
  font-family: sans-serif;
}
.accordion {
  background: white;
  margin: auto;
  padding: 1em;
  width: 50%;
}
.accordion h1 {
  text-align: center;
}
.accordion h2 {
  color: red;
  cursor: pointer;
}
.accordion h2, .accordion p {
  margin: 0;
}

Finalmente, puedes ver el funcionamiento del acordeón desde este enlace. Los códigos mostrados en este artículo son solamente un punto de partida y estás en libertad de modificarlos según los requerimientos de tu proyecto.

Hasta la próxima. ¡Abur!

César Vargas-Machuca

César Vargas-Machuca

Desarrollador web (front-end). Creador de sitios web adaptables al entorno del usuario (responsive web design) y optimizados para los motores de búsqueda (posicionamiento SEO). Lector frecuente. Apasionado por la buena música. Aprendiz empedernido. Amigo de los animales. Excesivamente puntual. Detesto el spam. Soltero, ayer y hoy. Peruano, ¡siempre!