En este blog, voy a crear un acordeón utilizando javascript nativo. No se requiere ninguna biblioteca como jQuery. JQueryUI tiene un componente de acordeón incorporado, que es genial para usar. Pero como desarrollador responsable, también debemos saber cómo crear uno con javascript puro. Si no sabes lo que es el acordeón entonces mira jquery uno aquí.
Dividamos el componente en pasos más pequeños.
- El acordeón contiene una lista de paneles.
- Cada panel tiene dos componentes, cabecera & cuerpo.
- El componente de cabecera de todos los paneles es siempre visible.
- Un panel puede ser expandido o colapsado.
- Cuando un panel es expandido, su componente de cuerpo se hace visible.
- Sólo se puede expandir un panel a la vez.
- Cuando se expande otro panel, el componente del cuerpo del último se oculta.
Construyamos el componente con pequeños pasos.
Paso1 :- Diseñar HTML básico
Creemos un html básico que crea una lista de paneles con cabecera &cuerpo.
El html de arriba contiene una lista de paneles. Cada panel tiene elemento de cabecera y cuerpo. Actualmente todo es visible.
Paso2 :- Definir algunos CSS para manejar la visibilidad
Vamos a crear dos clases CSS para definir la visibilidad del cuerpo.
Por defecto, queremos ocultar todo el cuerpo del panel según el requisito. Ahora necesitamos mostrar sólo el elemento expandido a la vez. Añadiremos la clase active en el div del panel para hacer visible el cuerpo.
Paso3 :- Usando CSS en el HTML
Después de añadir CSS en nuestro HTML, el código será
Ahora todo el cuerpo del panel está oculto excepto el primero. Hemos creado nuestro componente básico de acordeón. Necesitamos usar algo de javascript para hacerlo completamente funcional.
Paso4 :- Añadir eventos de clic
Añadiremos un evento de clic en cada panel, que cambiará la visibilidad del panel.
Enlace a JS Fiddle aquí
La función initAccordion se define para inicializar el componente acordeón. Pone un evento de clic en cada panel. Cuando se hace clic en un panel, elimina la clase activa del panel activo actual y la añade al nuevo panel. Por defecto, hace que el primer panel sea el activo. Podemos hacer que cualquier panel esté activo por defecto pasando el elemento panel a la función showPanel.
Hemos creado nuestro acordeón con éxito. Esto es sólo un modelo muy básico de acordeón, pero cubre la funcionalidad principal.
Podemos hacerlo más elegante añadiendo bonitos estilos css, animación e iconos. También, podemos hacerlo más orientado al rendimiento mediante la implementación de la delegación de eventos & el almacenamiento en caché de los elementos activos actuales. Consulte mi blog sobre eventos para aprender sobre los eventos en detalle.