Snippet: acordeón desplegable con HTML, CSS y Javascript

Un acordeón es un elemento web que se suele utilizar para alternar entre ocultar y mostrar una gran cantidad de contenido.

Es muy común utilizarlo para crear secciones de FAQ (Preguntas Frecuentes) en las que se visualiza la pregunta, y al hacer click sobre ella, se despliega la respuesta en la parte inferior, a modo de acordeón.

En este vídeo vamos a ver cómo crear un acordeón utilizando únicamente HTML, CSS y Javascript; es decir, sin bibliotecas externas como JQuery o Bootstrap.

¿Qué aprenderás en el vídeo?

En este vídeo veremos:

• Cómo convertir un botón en la parte superior de las secciones del acordeón con CSS.
• Cómo cambiar el fondo de esta sección al situarnos encima con el ratón.
• Cómo dar estilo a los paneles que se muestran y ocultan de cada acordeón.
• Cómo asignar un evento a todos los elementos del acordeón de una sola vez utilizando Javascript.
• Cómo asignar y desasignar una clase utilizando .toggle con Javascript.
• Cómo acceder a un elemento hermano de otro para cambiar su estilo con Javascript..
• Cómo visualizar u ocultar un elemento mediante Javascript.

Vídeo y código fuente

¿Quieres saber cómo lo he hecho paso a paso? ¡Aquí tienes el código fuente y el vídeo de la solución!

Y si quieres compartir tu propuesta, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…