Instituto Tecnológico Nacional de México

Instituto Tecnológico de Oaxaca

Carrera: Ingeniería en Sistemas Computacionales Materia: Programación Web Unidad: Unidad 2 Docente: Adelina Martínez Nieto Alumno: Enríquez Rodríguez Alejandro Guillermo Fecha de entrega: 05 de julio del 2026

Acordeón.js — Componente Visual de Preguntas Frecuentes

¿Qué problema resuelve?

Cuando una página tiene varias preguntas frecuentes, mostrar todas las respuestas al mismo tiempo satura la vista y obliga al usuario a hacer scroll de más para encontrar lo que busca. Este componente permite mostrar solo las preguntas, y que el usuario abra únicamente la respuesta que le interesa con un clic, sin recargar la página y sin usar ningún framework.

Acordeon.js encapsula toda la lógica de abrir/cerrar en un solo archivo reutilizable: se puede agregar cualquier cantidad de preguntas nuevas copiando el mismo bloque de HTML, sin tocar el CSS ni el JavaScript.

Estructura del proyecto

mi-componente-js/
├── README.md
├── index.html         
├── css/
│   └── componente.css   
├── img/
│   ├── robot.png         
│   └── mas.png           
└── js/
    └── componente.js     

Instalación

No requiere ningún gestor de paquetes ni proceso de compilación. Basta con copiar componente.css y componente.js a tu proyecto y enlazarlos en tu HTML:

<link rel="stylesheet" href="css/componente.css" />
<script src="js/componente.js"></script>

Uso

Estructura básica de una pregunta

Cada pregunta va dentro de un contenedor .acordeon, envuelta en un .acordeon-item:

<div class="acordeon">

    <div class="titulo-container">
        <img src="img/robot.png" alt="robot" class="icono-robot" />
        <h2>Preguntas Frecuentes</h2>
    </div>

    <div class="acordeon-item">
        <div class="acordeon-encabezado">¿Qué es este componente?
            <img src="img/mas.png" alt="mas" class="icono-flecha" />
        </div>
        <div class="acordeon-contenido">
            <p>Es un acordeón de preguntas frecuentes hecho en JavaScript puro.</p>
        </div>
    </div>

</div>

Reutilización — agregar más preguntas

Para agregar una nueva pregunta solo se copia el mismo bloque .acordeon-item con distinto texto, sin escribir código nuevo en el CSS ni en el JS:

<div class="acordeon-item">
    <div class="acordeon-encabezado">¿Cómo funciona?
        <img src="img/mas.png" alt="mas" class="icono-flecha" />
    </div>
    <div class="acordeon-contenido">
        <p>Al hacer clic en la pregunta, JavaScript agrega una clase que activa la animación en CSS.</p>
    </div>
</div>

<div class="acordeon-item">
    <div class="acordeon-encabezado">¿Se puede reutilizar?
        <img src="img/mas.png" alt="mas" class="icono-flecha" />
    </div>
    <div class="acordeon-contenido">
        <p>Sí, solo agregando un nuevo bloque HTML con la misma estructura de clases.</p>
    </div>
</div>

Lógica en JavaScript (componente.js)

El componente detecta clics en cualquier .acordeon-encabezado, cierra las demás respuestas abiertas, y muestra u oculta la que se seleccionó animando su max-height:

const acordeon_encabezados = document.querySelectorAll(".acordeon-encabezado");
const acordeon_contenidos = document.querySelectorAll(".acordeon-contenido");

acordeon_encabezados.forEach((encabezado) => {
    encabezado.addEventListener("click", () => {

        const acordeonItem = encabezado.parentElement;
        const acordeon_contenido = acordeonItem.querySelector(".acordeon-contenido");

        acordeon_contenidos.forEach((contenido) => {
            if (contenido !== acordeon_contenido) {
                contenido.classList.remove("active");
                contenido.style.maxHeight = "0";
                contenido.parentElement.classList.remove("active");
            }
        });

        acordeon_contenido.classList.toggle("active");
        acordeonItem.classList.toggle("active");

        if (acordeon_contenido.classList.contains("active")) {
            acordeon_contenido.style.maxHeight = acordeon_contenido.scrollHeight + "px";
        } else {
            acordeon_contenido.style.maxHeight = "0";
        }
    });
});

Animación del ícono de flecha (componente.css)

Cuando el .acordeon-item recibe la clase active desde el JS, el ícono de flecha gira 180 grados con una transición suave:

.icono-flecha {
    width: 20px;
    transition: transform 0.3s ease;
}

.acordeon-item.active .icono-flecha {
    transform: rotate(180deg);
}

Capturas de pantalla — componente funcionando

Acordeón cerrado

Acordeón con una pregunta abierta

Consola sin errores

RESPONSIVE

Tecnologías utilizadas

• HTML5 — estructura del acordeón y las preguntas
• CSS3 — animaciones con max-height, transition y flexbox para el layout
• JavaScript vanilla — sin frameworks ni dependencias externas

Video demostrativo

Ver video demo

Autor

Enríquez Rodríguez Alejandro Guillermo

Componente visual reutilizable de acordeón para preguntas frecuentes, hecho en JavaScript puro.