Componentes de Bootstrap

Acordeón y colapso

Secciones que se abren y se cierran en el sitio, para mantener corta una página larga.

Un acordeón apila secciones de las que solo una está abierta a la vez; el colapso muestra u oculta un bloque. Úsalos para contenido que la mayoría no necesita entero a la vez.

Cuándo usarlo

Úsalo

Encabezados cortos y concretos: es lo que se recorre con la vista.
Abrir primero la sección que más gente necesita.
Usar el colapso para detalles opcionales («Ver más»).

No

Ocultar contenido que el usuario necesita para terminar la tarea.
Anidar acordeones.
Usar un acordeón donde unas pestañas mostrarían las vistas una al lado de otra.

Anatomía

Un grupo (accordion) de elementos (accordion-item), cada uno con un botón de encabezado (accordion-button) y un panel (accordion-collapse con accordion-body). Un colapso simple es un botón que muestra u oculta un bloque collapse.

Variantes y estados

Acordeón

Natural numbers, integers and the number line. Four activities.

Linear and quadratic functions, with graphs. Six activities.

Solving linear systems. Five activities and a final quiz.

Colapso

Extra information that most people do not need: opening dates, the enrolment method and the group mode of the course.

Combinaciones

Combinación	Para qué usarla
Acordeón × uno abierto	Secciones de las que solo una está abierta a la vez (`data-bs-parent`); la primera abierta por defecto.
Colapso × detalles	Un botón que muestra más («Ver más detalles»); dice qué va a mostrar.
Acordeón × tarjeta	Dentro de una tarjeta o una sección de página, nunca dentro de otro acordeón.

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
La cabecera abierta va teñida y su texto en el tono primario	Se ve qué sección está abierta sin depender solo de la flecha.
La flecha gira con una animación corta	El usuario ve cómo responde la sección al clic.
El panel se abre con una transición de altura	La página de debajo se mueve con suavidad en vez de saltar.

Clases

Clase	Qué hace
`accordion`, `accordion-item`, `accordion-button`, `accordion-bodyaccordion`, `card`, `card-header`, `card-body`	La estructura del acordeón
`collapse`, `show`	Un bloque que se puede ocultar; `show` es abierto
`data-bs-toggle="collapse"`, `data-bs-target`	Qué lo abre
`data-bs-parent`	Cierra los demás al abrir uno

En esta versión

Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable. Tiene su propio componente, accordion.

Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos. No hay componente de acordeón: se construye con tarjetas y colapso.

Accesibilidad

El encabezado es un button con aria-expanded y aria-controls.
Intro y Espacio abren y cierran; Tab se mueve entre encabezados.
El nivel del título encaja con la página: envuelve el botón en h2/h3.