Un acordeón es un método excelente para proporcionar al visitante una gran cantidad de información en una sola página sin mostrar todo el texto, manteniendo la interfaz de usuario limpia y bien organizada.
Un acordeón lleno de información puede crearse a partir de código HTML, CSS y JavaScript que mostrará varias pestañas dentro del acordeón que se abrirán cuando se haga clic o se pase el ratón por encima de cada pestaña, revelando la información que contiene.
En este tutorial, te guiaremos a través de la creación de un bloque acordeón en HTML que será responsive para adaptarse a todos los tamaños de pantalla.
Crear un Bloque Acordeón en HTML
Cuando creas un bloque acordeón, hay 3 códigos diferentes involucrados en el proceso de creación: uno en HTML, uno en CSS y uno en JavaScript.
Cada uno de estos códigos tiene su propio propósito, y los tres juntos te darán un código completo y utilizable que puedes integrar en cualquier sitio para crear un bloque acordeón moderno y responsivo.
Veamos cómo crear un acordeón con un código como éste:
See the Pen Bloque Acordeón HTML by Alex (@htmldesdecero) on CodePen.
Crear la estructura del acordeón en HTML
El código HTML representará la estructura básica del acordeón, definiendo los encabezados de las pestañas y el contenido asociado a cada pestaña, que se abrirá cuando el usuario haga clic.
La etiqueta “div” con el atributo de clase “accordion-container” representa toda la estructura del acordeón. En su interior, encontrarás varias pestañas de acordeón representadas por un par de etiquetas “div” con los atributos de clase “accordion-header” y “accordion-content“, que son respectivamente la cabecera de la pestaña y el contenido de la pestaña que se ocultará.
La etiqueta “link” se utiliza para recuperar el icono de la flecha de una biblioteca llamada font-awesome. Estas flechas se muestran antes de la cabecera de una pestaña en forma de ““.
Añadir una flecha para indicar cuándo se abre o se cierra una pestaña es opcional, pero mejora la experiencia del usuario y da al acordeón un aspecto más profesional y moderno. No obstante, puedes sustituir la flecha por otro icono o una alternativa a la biblioteca si quieres utilizar un mínimo de recursos externos en tu sitio. De hecho deberías considerarlo si quieres optimizar tu código HTML.
<div class="accordion-container">
<div class="accordion-header">
<i class="fa fa-angle-right"></i> ¿Qué es un acordeón en HTML?
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget tellus eget ex gravida fringilla. Pellentesque semper augue ac nunc viverra, sit amet aliquam odio hendrerit. Mauris tempus at risus.</div>
<div class="accordion-header">
<i class="fa fa-angle-right"></i> ¿Cómo se crea un acordeón en HTML?
</div>
<div class="accordion-content">Duis scelerisque lectus ipsum, in laoreet diam feugiat id. Integer dapibus mauris justo, vel feugiat elit facilisis non. Maecenas ac eros eu arcu volutpat congue vel ut massa. Pellentesque habitant.</div>
<div class="accordion-header">
<i class="fa fa-angle-right"></i> ¿Cuál es la ventaja de usar un acordeón en una página web?
</div>
<div class="accordion-content">Nulla a massa massa. Sed ultrices porta nisi, vel eleifend metus volutpat sed. Integer eget urna lorem. Etiam bibendum ante at neque dignissim efficitur. Phasellus iaculis, massa eu porta tincidunt.</div>
<div class="accordion-header">
<i class="fa fa-angle-right"></i> ¿Cómo se implementa el efecto de expansión/contracción en un acordeón?
</div>
<div class="accordion-content">Phasellus faucibus suscipit est id lacinia. Suspendisse ultricies fermentum turpis, non lobortis sapien ultricies a. Integer sodales at sapien ut gravida. Sed pellentesque rhoncus arcu. Vestibulum maximus, felis dictum cursus.</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />Definir el Estilo y la Apariencia del Acordeón en CSS
El código CSS que se muestra a continuación se coloca después del código HTML y se utiliza para definir el estilo y la apariencia del acordeón. Utilizando las clases CSS definidas en el código HTML, es posible dar estilo a las cabeceras y al contenido de las pestañas.
En el código HTML, el código CSS debe presentarse entre etiquetas “style”, pero entonces puedes escribir el mismo código que si estuvieras en un archivo CSS. Si lo deseas, también puedes separar el código CSS en un archivo “.css” y enlazar este archivo al código HTML con un enlace “stylesheet”. Aprende aquí: ¿Cómo Insertar CSS en HTML?: Todos los Métodos.
.accordion-header {
background-color: #f2f2f2;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.accordion-header:hover {
background-color: #ddd;
}
.accordion-header i {
margin-right: 10px;
}
.accordion-content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
@media (max-width: 767px) {
.accordion-header {
font-size: 18px;
}
}
@media (min-width: 768px) {
.accordion-header {
font-size: 22px;
}
}El bloque de código de la clase “.accordion-header” incluye la apariencia general de las cabeceras de acordeón. Define el color de fondo, el color y tamaño del texto, el aspecto del cursor y la duración de las transiciones cuando se abre una pestaña. El segundo bloque seguido de ” :hover” de esta misma clase se utiliza para cambiar el color de fondo cuando se pasa el ratón por encima, para que sea más fácil ver a qué pestaña se está apuntando.
El bloque “.accordion-header i” añade un margen al icono para que no se muestre directamente antes del texto de cabecera.
Por último, el bloque de la clase “.accordion-content” contiene todo el estilo del contenido de cada pestaña. Para hacer desaparecer el contenido del acordeón, utilizamos en particular las dos propiedades CSS siguientes
- max-height: 0;
- overflow: hidden;
Este código sigue siendo básico y puede personalizarse para adaptarse mejor al aspecto general del sitio.
Por último, los distintos bloques contenidos en las consultas de medios “@media” pueden utilizarse para adaptar el tamaño de las cabeceras del acordeón en función de la resolución del dispositivo utilizado para ver el sitio web, para una mejor experiencia de usuario y legibilidad del bloque acordeón.
Control del Acordeón en JavaScript
El código JavaScript es una parte importante del bloque acordeón, ya que es este código el que se encargará del funcionamiento real del acordeón. El código JavaScript insertado entre etiquetas “script” en el código HTML añadirá eventos al código y generará acciones bajo ciertas condiciones.
El siguiente código JavaScript reaccionará a un evento, que es un usuario haciendo clic en una de las pestañas del acordeón, con el evento “header.addEventListener("click", function()“, que hará visible el contenido de la pestaña.
const headers = document.querySelectorAll(".accordion-header");
headers.forEach(header => {
header.addEventListener("click", function() {
this.classList.toggle("active");
const content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
this.querySelector("i").classList.remove("fa-angle-down");
this.querySelector("i").classList.add("fa-angle-right");
} else {
content.style.maxHeight = content.scrollHeight + "px";
this.querySelector("i").classList.remove("fa-angle-right");
this.querySelector("i").classList.add("fa-angle-down");
}
});
});Para ello, recuperamos el siguiente elemento de la cabecera, que es su contenido, en la constante “content“. Aplicamos una altura máxima definida por la altura del contenido para abrir la pestaña y revelar el contenido utilizando la instrucción “content.style.maxHeight = content.scrollHeight + "px";“.
Para cerrar la pestaña, basta con eliminar la altura máxima del contenido mediante la instrucción “content.style.maxHeight = null;“.
El icono también se modifica para corresponder a la apertura o cierre de la pestaña.
¿Por qué Crear un Bloque Acordeón en HTML?
Los bloques de acordeón se utilizan a menudo en los sitios web para ofrecer a los visitantes información que complemente la información principal sin afectar a la legibilidad de la página.
Al ocultar el contenido en el acordeón, que sólo se revela cuando el usuario realiza una acción, las páginas de su sitio serán menos largas y complicadas de navegar. También permite ocultar esta información adicional y mostrarla sólo a los visitantes que estén interesados en ella.
Por tanto, el acordeón permite no sobrecargar de texto una página y centrarse en la experiencia del usuario en una página.
Además, puedes integrar Google Tag Manager para realizar un seguimiento de la actividad del bloque acordeón y medir el número de clics en el acordeón, de modo que puedas evaluar si el acordeón es atractivo o no.
Preguntas Frecuentes: Bloque Acordeón en Acción
Ya puedes crear un bloque acordeón que encajará perfectamente en las páginas de tu sitio web. Este bloque de acordeón creado en HTML, CSS y JavaScript funcionará para cualquier sitio, y puede personalizarse según tus deseos o el aspecto general del sitio.
