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!
Código fuente de la solución
¡Ups! Este contenido es solo para codelovers, ¿no te has registrado aún? ¡Hazlo ahora!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…
Deja una respuesta
Lo siento, debes estar conectado para publicar un comentario.