Collapse y Accordion

Estructura básica de collapse

El componente collapse permite mostrar y ocultar contenido de forma interactiva mediante un mecanismo de expansión y contracción suave. Este componente resulta especialmente útil cuando necesitamos ahorrar espacio visual manteniendo accesible información adicional.

La estructura fundamental de collapse requiere dos elementos principales: un activador (trigger) que controla la visibilidad y un contenedor que alberga el contenido colapsable. Esta separación permite crear interfaces limpias donde el usuario puede decidir qué información ver.

Elementos fundamentales

El elemento activador puede ser cualquier elemento interactivo, típicamente un botón, que incorpora los atributos necesarios para controlar el comportamiento del collapse:

<button class="btn btn-primary" 
        data-bs-toggle="collapse" 
        data-bs-target="#miContenido" 
        aria-expanded="false">
  Mostrar información adicional
</button>

El contenedor colapsable utiliza la clase .collapse y requiere un identificador único que coincida con el valor del atributo data-bs-target del activador:

<div class="collapse" id="miContenido">
  <div class="card card-body">
    Este contenido aparece y desaparece cuando se activa el collapse.
    Puede incluir texto, imágenes, listas o cualquier elemento HTML.
  </div>
</div>

Atributos de control esenciales

El atributo data-bs-toggle="collapse" indica que el elemento actúa como activador del componente collapse. Este atributo es fundamental para que Bootstrap reconozca la funcionalidad.

El atributo data-bs-target especifica qué elemento debe expandirse o contraerse. Su valor debe coincidir exactamente con el id del contenedor colapsable, precedido del símbolo #.

El atributo aria-expanded mejora la accesibilidad indicando si el contenido está expandido (true) o contraído (false). Bootstrap actualiza automáticamente este valor.

Estados visuales del contenido

Por defecto, el contenido colapsable permanece oculto hasta que el usuario interactúa con el activador. La clase .collapse aplica display: none inicialmente.

Para mostrar el contenido expandido por defecto, se añade la clase .show junto a .collapse:

<div class="collapse show" id="contenidoVisible">
  <div class="card card-body">
    Este contenido está visible desde el inicio y puede contraerse.
  </div>
</div>

Ejemplo práctico: información de producto

Un caso común es mostrar detalles adicionales de un producto que no son esenciales en la vista inicial:

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Smartphone XYZ</h5>
    <p class="card-text">Precio: 299€</p>
    
    <button class="btn btn-outline-info btn-sm" 
            data-bs-toggle="collapse" 
            data-bs-target="#especificaciones" 
            aria-expanded="false">
      Ver especificaciones técnicas
    </button>
    
    <div class="collapse mt-3" id="especificaciones">
      <div class="border-top pt-3">
        <ul class="list-unstyled">
          <li><strong>Pantalla:</strong> 6.1 pulgadas OLED</li>
          <li><strong>Memoria:</strong> 128GB de almacenamiento</li>
          <li><strong>Cámara:</strong> 48MP principal</li>
          <li><strong>Batería:</strong> 3000mAh</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Variaciones con enlaces

Los enlaces también pueden actuar como activadores de collapse, resultando útiles para crear navegación contextual o elementos informativos menos prominentes:

<p>
  Para más información sobre nuestra política de privacidad,
  <a data-bs-toggle="collapse" 
     href="#politicaPrivacidad" 
     aria-expanded="false">
    consulta los detalles completos
  </a>
</p>

<div class="collapse" id="politicaPrivacidad">
  <div class="alert alert-info">
    <h6>Política de Privacidad</h6>
    <p>Recopilamos únicamente los datos necesarios para procesar tu pedido...</p>
  </div>
</div>

La estructura básica de collapse proporciona la base conceptual para crear interfaces más complejas. En las siguientes secciones exploraremos cómo manejar múltiples elementos colapsables y cómo los accordions extienden esta funcionalidad para crear grupos organizados de contenido.

Contenido colapsable y múltiples elementos

Cuando trabajamos con aplicaciones más complejas, frecuentemente necesitamos múltiples elementos collapse que funcionen de manera independiente. Esta aproximación permite crear interfaces organizadas donde diferentes secciones pueden expandirse y contraerse sin afectar al resto del contenido.

Collapse independientes en cards

Una implementación común consiste en distribuir información relacionada en múltiples cards, cada una con su propio mecanismo de collapse. Este patrón resulta especialmente útil en páginas de productos, perfiles de usuario o dashboards informativos:

<div class="row">
  <div class="col-md-6">
    <div class="card mb-3">
      <div class="card-header">
        <button class="btn btn-link text-decoration-none p-0 fw-bold" 
                data-bs-toggle="collapse" 
                data-bs-target="#caracteristicas" 
                aria-expanded="false">
          Características principales
        </button>
      </div>
      <div class="collapse" id="caracteristicas">
        <div class="card-body">
          <ul class="list-unstyled">
            <li>✓ Procesador de última generación</li>
            <li>✓ Memoria RAM de 16GB</li>
            <li>✓ Almacenamiento SSD 512GB</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="card mb-3">
      <div class="card-header">
        <button class="btn btn-link text-decoration-none p-0 fw-bold" 
                data-bs-toggle="collapse" 
                data-bs-target="#garantia" 
                aria-expanded="false">
          Información de garantía
        </button>
      </div>
      <div class="collapse" id="garantia">
        <div class="card-body">
          <p><strong>Garantía extendida:</strong> 3 años</p>
          <p><strong>Cobertura:</strong> Defectos de fabricación</p>
          <p><strong>Soporte técnico:</strong> 24/7</p>
        </div>
      </div>
    </div>
  </div>
</div>

Secciones FAQ con múltiples collapse

Las secciones de preguntas frecuentes constituyen uno de los casos de uso más habituales para múltiples elementos collapse independientes. Cada pregunta actúa como activador de su respuesta correspondiente:

<div class="container">
  <h3>Preguntas frecuentes</h3>
  
  <div class="mb-3">
    <button class="btn btn-outline-primary w-100 text-start" 
            data-bs-toggle="collapse" 
            data-bs-target="#faq1" 
            aria-expanded="false">
      ¿Cómo puedo realizar un pedido?
    </button>
    <div class="collapse mt-2" id="faq1">
      <div class="alert alert-light">
        Puedes realizar tu pedido directamente desde nuestra web, 
        añadiendo los productos al carrito y siguiendo el proceso de checkout.
      </div>
    </div>
  </div>

  <div class="mb-3">
    <button class="btn btn-outline-primary w-100 text-start" 
            data-bs-toggle="collapse" 
            data-bs-target="#faq2" 
            aria-expanded="false">
      ¿Cuáles son los métodos de pago disponibles?
    </button>
    <div class="collapse mt-2" id="faq2">
      <div class="alert alert-light">
        Aceptamos tarjetas de crédito, PayPal, transferencia bancaria 
        y pago contra reembolso.
      </div>
    </div>
  </div>

  <div class="mb-3">
    <button class="btn btn-outline-primary w-100 text-start" 
            data-bs-toggle="collapse" 
            data-bs-target="#faq3" 
            aria-expanded="false">
      ¿Cuánto tiempo tarda la entrega?
    </button>
    <div class="collapse mt-2" id="faq3">
      <div class="alert alert-light">
        El tiempo de entrega estándar es de 3-5 días laborables. 
        También ofrecemos entrega express en 24-48 horas.
      </div>
    </div>
  </div>
</div>

Navegación secundaria colapsable

Los menús de navegación secundaria pueden beneficiarse de elementos collapse para mostrar subsecciones relacionadas. Esta técnica es especialmente útil en sidebars o menús de categorías:

<nav class="border rounded p-3">
  <h5>Categorías</h5>
  
  <div class="mb-2">
    <button class="btn btn-link text-decoration-none p-0 d-flex align-items-center w-100 text-start" 
            data-bs-toggle="collapse" 
            data-bs-target="#electronica" 
            aria-expanded="false">
      <span class="me-2">📱</span>
      Electrónica
    </button>
    <div class="collapse ms-3 mt-2" id="electronica">
      <ul class="list-unstyled">
        <li><a href="#" class="text-decoration-none">Smartphones</a></li>
        <li><a href="#" class="text-decoration-none">Tablets</a></li>
        <li><a href="#" class="text-decoration-none">Accesorios</a></li>
      </ul>
    </div>
  </div>

  <div class="mb-2">
    <button class="btn btn-link text-decoration-none p-0 d-flex align-items-center w-100 text-start" 
            data-bs-toggle="collapse" 
            data-bs-target="#ropa" 
            aria-expanded="false">
      <span class="me-2">👕</span>
      Ropa
    </button>
    <div class="collapse ms-3 mt-2" id="ropa">
      <ul class="list-unstyled">
        <li><a href="#" class="text-decoration-none">Camisetas</a></li>
        <li><a href="#" class="text-decoration-none">Pantalones</a></li>
        <li><a href="#" class="text-decoration-none">Chaquetas</a></li>
      </ul>
    </div>
  </div>
</nav>

Organización de contenido en listas

Las listas de elementos pueden enriquecerse con información adicional colapsable, permitiendo al usuario acceder a detalles específicos sin saturar la vista principal:

<div class="list-group">
  <div class="list-group-item">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h6 class="mb-1">Proyecto Alpha</h6>
        <p class="mb-1 text-muted">Cliente: Empresa XYZ</p>
      </div>
      <button class="btn btn-sm btn-outline-info" 
              data-bs-toggle="collapse" 
              data-bs-target="#proyectoAlpha" 
              aria-expanded="false">
        Detalles
      </button>
    </div>
    <div class="collapse mt-3" id="proyectoAlpha">
      <div class="border-top pt-3">
        <p><strong>Estado:</strong> <span class="badge bg-success">En progreso</span></p>
        <p><strong>Fecha límite:</strong> 15 de Marzo, 2024</p>
        <p><strong>Descripción:</strong> Desarrollo de aplicación web responsive 
        con panel de administración completo.</p>
      </div>
    </div>
  </div>

  <div class="list-group-item">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h6 class="mb-1">Proyecto Beta</h6>
        <p class="mb-1 text-muted">Cliente: Startup ABC</p>
      </div>
      <button class="btn btn-sm btn-outline-info" 
              data-bs-toggle="collapse" 
              data-bs-target="#proyectoBeta" 
              aria-expanded="false">
        Detalles
      </button>
    </div>
    <div class="collapse mt-3" id="proyectoBeta">
      <div class="border-top pt-3">
        <p><strong>Estado:</strong> <span class="badge bg-warning text-dark">Pendiente</span></p>
        <p><strong>Fecha límite:</strong> 30 de Abril, 2024</p>
        <p><strong>Descripción:</strong> Rediseño completo de identidad visual 
        y optimización SEO.</p>
      </div>
    </div>
  </div>
</div>

Activadores múltiples para un mismo contenido

Ocasionalmente puede resultar útil tener varios elementos que controlen el mismo contenido colapsable. Esto se consigue utilizando el mismo valor en el atributo data-bs-target:

<div class="card">
  <div class="card-header d-flex justify-content-between">
    <button class="btn btn-primary btn-sm" 
            data-bs-toggle="collapse" 
            data-bs-target="#configuracion" 
            aria-expanded="false">
      Configuración
    </button>
    <a href="#configuracion" 
       class="text-decoration-none" 
       data-bs-toggle="collapse" 
       aria-expanded="false">
      Ajustes avanzados
    </a>
  </div>
  <div class="collapse" id="configuracion">
    <div class="card-body">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="notificaciones">
        <label class="form-check-label" for="notificaciones">
          Recibir notificaciones por email
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="marketing">
        <label class="form-check-label" for="marketing">
          Permitir comunicaciones comerciales
        </label>
      </div>
    </div>
  </div>
</div>

Mejores prácticas para múltiples collapse

Al trabajar con múltiples elementos collapse, es fundamental mantener la coherencia visual utilizando clases de Bootstrap consistentes. Los botones activadores deben seguir un patrón de diseño uniforme para facilitar la comprensión del usuario.

La nomenclatura de identificadores debe ser descriptiva y única para evitar conflictos. Utilizar prefijos como #faq-, #producto- o #seccion- ayuda a mantener la organización del código.

Considerar la experiencia del usuario es crucial: demasiados elementos collapse abiertos simultáneamente pueden saturar la interfaz, mientras que muy pocos pueden ocultar información relevante.

Accordions y grupos organizados

Los accordions representan una evolución natural del concepto collapse, organizando múltiples secciones colapsables en un grupo cohesivo donde tradicionalmente solo una sección permanece abierta al mismo tiempo. Esta funcionalidad resulta ideal cuando necesitamos presentar información categorizada de manera ordenada y espacialmente eficiente.

Estructura fundamental del accordion

Un accordion se construye utilizando la clase .accordion como contenedor principal, que alberga múltiples elementos .accordion-item. Cada item contiene una cabecera (.accordion-header) con el botón activador y un cuerpo (.accordion-body) con el contenido colapsable:

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#collapseOne" 
              aria-expanded="true">
        Primera sección del accordion
      </button>
    </h2>
    <div id="collapseOne" 
         class="accordion-collapse collapse show" 
         data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>Este es el contenido de la primera sección.</strong>
        Aquí puedes incluir texto, listas, imágenes o cualquier elemento HTML 
        que proporcione información detallada sobre el tema de la sección.
      </div>
    </div>
  </div>
</div>

Comportamiento de grupo exclusivo

La característica distintiva de los accordions es el atributo data-bs-parent, que hace referencia al contenedor principal del accordion. Este atributo garantiza que cuando una sección se expande, las demás se contraen automáticamente, manteniendo solo una sección visible:

<div class="accordion" id="faqAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#pregunta1" 
              aria-expanded="false">
        ¿Cómo funciona el proceso de envío?
      </button>
    </h2>
    <div id="pregunta1" 
         class="accordion-collapse collapse" 
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Procesamos los pedidos en 24 horas laborables. Una vez preparado, 
        recibirás un email con el número de seguimiento para rastrear tu envío.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#pregunta2" 
              aria-expanded="false">
        ¿Puedo modificar mi pedido después de realizarlo?
      </button>
    </h2>
    <div id="pregunta2" 
         class="accordion-collapse collapse" 
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Las modificaciones son posibles durante las primeras 2 horas después 
        de realizar el pedido. Contacta con nuestro servicio de atención al cliente 
        para solicitar cambios.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#pregunta3" 
              aria-expanded="false">
        ¿Qué hacer si mi producto llega defectuoso?
      </button>
    </h2>
    <div id="pregunta3" 
         class="accordion-collapse collapse" 
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Ofrecemos garantía completa. Si recibes un producto defectuoso, 
        contáctanos dentro de los 7 días siguientes a la recepción para 
        gestionar el cambio o reembolso inmediato.
      </div>
    </div>
  </div>
</div>

Accordion de información de producto

Los detalles de productos se benefician enormemente de la organización accordion, permitiendo categorizar información técnica, especificaciones y políticas de manera accesible:

<div class="accordion" id="productoAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#especificaciones" 
              aria-expanded="true">
        📋 Especificaciones técnicas
      </button>
    </h2>
    <div id="especificaciones" 
         class="accordion-collapse collapse show" 
         data-bs-parent="#productoAccordion">
      <div class="accordion-body">
        <div class="row">
          <div class="col-sm-6">
            <ul class="list-unstyled">
              <li><strong>Procesador:</strong> Intel i7 12ª Gen</li>
              <li><strong>RAM:</strong> 16GB DDR4</li>
              <li><strong>Almacenamiento:</strong> SSD 1TB NVMe</li>
            </ul>
          </div>
          <div class="col-sm-6">
            <ul class="list-unstyled">
              <li><strong>Pantalla:</strong> 15.6" Full HD</li>
              <li><strong>Gráficos:</strong> NVIDIA RTX 3060</li>
              <li><strong>Peso:</strong> 2.1 kg</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#contenido" 
              aria-expanded="false">
        📦 Contenido de la caja
      </button>
    </h2>
    <div id="contenido" 
         class="accordion-collapse collapse" 
         data-bs-parent="#productoAccordion">
      <div class="accordion-body">
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex align-items-center">
            <span class="badge bg-primary me-2">1x</span>
            Laptop Gaming Pro
          </li>
          <li class="list-group-item d-flex align-items-center">
            <span class="badge bg-primary me-2">1x</span>
            Cargador original 120W
          </li>
          <li class="list-group-item d-flex align-items-center">
            <span class="badge bg-primary me-2">1x</span>
            Manual de usuario
          </li>
          <li class="list-group-item d-flex align-items-center">
            <span class="badge bg-primary me-2">1x</span>
            Certificado de garantía
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#garantia" 
              aria-expanded="false">
        🛡️ Garantía y soporte
      </button>
    </h2>
    <div id="garantia" 
         class="accordion-collapse collapse" 
         data-bs-parent="#productoAccordion">
      <div class="accordion-body">
        <div class="alert alert-success">
          <h6 class="alert-heading">Garantía extendida incluida</h6>
          <p class="mb-0">
            Este producto incluye 3 años de garantía del fabricante más 
            1 año adicional de garantía extendida sin coste adicional.
          </p>
        </div>
        <p><strong>Soporte técnico:</strong> Disponible 24/7 vía chat, email y teléfono</p>
        <p><strong>Reparaciones:</strong> Servicio técnico autorizado en más de 200 ciudades</p>
      </div>
    </div>
  </div>
</div>

Accordion flush para integración seamless

La variante .accordion-flush elimina los bordes predeterminados del accordion, permitiendo una integración más fluida con el contenido circundante. Esta aproximación resulta especialmente útil dentro de cards o secciones con bordes propios:

<div class="card">
  <div class="card-header">
    <h5 class="mb-0">Configuración de la cuenta</h5>
  </div>
  
  <div class="accordion accordion-flush" id="configAccordion">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#perfil" 
                aria-expanded="false">
          Información personal
        </button>
      </h2>
      <div id="perfil" 
           class="accordion-collapse collapse" 
           data-bs-parent="#configAccordion">
        <div class="accordion-body">
          <p>Actualiza tu información personal como nombre, email y teléfono.</p>
          <button class="btn btn-outline-primary btn-sm">Editar perfil</button>
        </div>
      </div>
    </div>

    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#privacidad" 
                aria-expanded="false">
          Configuración de privacidad
        </button>
      </h2>
      <div id="privacidad" 
           class="accordion-collapse collapse" 
           data-bs-parent="#configAccordion">
        <div class="accordion-body">
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="notificaciones" checked>
            <label class="form-check-label" for="notificaciones">
              Recibir notificaciones por email
            </label>
          </div>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="marketing">
            <label class="form-check-label" for="marketing">
              Permitir comunicaciones comerciales
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Accordion para documentación y guías

Los sistemas de documentación encuentran en los accordions una herramienta perfecta para organizar contenido por temas, manteniendo una navegación clara y enfocada:

<div class="accordion" id="guiaAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#introduccion" 
              aria-expanded="true">
        🚀 Primeros pasos
      </button>
    </h2>
    <div id="introduccion" 
         class="accordion-collapse collapse show" 
         data-bs-parent="#guiaAccordion">
      <div class="accordion-body">
        <ol>
          <li>Crea tu cuenta completando el formulario de registro</li>
          <li>Verifica tu dirección de email mediante el enlace enviado</li>
          <li>Completa tu perfil con la información básica</li>
          <li>Explora las funcionalidades principales del dashboard</li>
        </ol>
        <div class="alert alert-info">
          <small>💡 <strong>Consejo:</strong> Dedica unos minutos a explorar cada sección para familiarizarte con la interfaz.</small>
        </div>
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#configuracion" 
              aria-expanded="false">
        ⚙️ Configuración básica
      </button>
    </h2>
    <div id="configuracion" 
         class="accordion-collapse collapse" 
         data-bs-parent="#guiaAccordion">
      <div class="accordion-body">
        <h6>Personalización del workspace</h6>
        <p>Ajusta la interfaz según tus preferencias:</p>
        <ul>
          <li>Selecciona tu tema preferido (claro u oscuro)</li>
          <li>Configura las notificaciones que deseas recibir</li>
          <li>Establece tu zona horaria local</li>
          <li>Define los accesos directos del dashboard</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#avanzado" 
              aria-expanded="false">
        🔧 Funciones avanzadas
      </button>
    </h2>
    <div id="avanzado" 
         class="accordion-collapse collapse" 
         data-bs-parent="#guiaAccordion">
      <div class="accordion-body">
        <p>Una vez domines lo básico, explora estas funcionalidades avanzadas:</p>
        <div class="row">
          <div class="col-md-6">
            <h6>Automatizaciones</h6>
            <ul class="list-unstyled">
              <li>• Reglas de procesamiento automático</li>
              <li>• Notificaciones personalizadas</li>
              <li>• Integraciones con terceros</li>
            </ul>
          </div>
          <div class="col-md-6">
            <h6>Análisis</h6>
            <ul class="list-unstyled">
              <li>• Métricas de rendimiento</li>
              <li>• Reportes personalizados</li>
              <li>• Exportación de datos</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Consideraciones de diseño y usabilidad

Los accordions funcionan mejor cuando las secciones contienen información relacionada pero independiente. La agrupación lógica del contenido facilita la comprensión y navegación del usuario.

El estado inicial del accordion puede configurarse mostrando la sección más relevante abierta mediante las clases .show y aria-expanded="true", mientras que las demás permanecen contraídas con .collapsed y aria-expanded="false".

La consistencia en la longitud del contenido de cada sección mejora la experiencia del usuario. Secciones extremadamente largas pueden requerir scroll interno, mientras que secciones muy cortas pueden no justificar el uso de accordion.

Los accordions proporcionan una solución elegante para organizar grandes cantidades de información en espacios limitados, especialmente en dispositivos móviles donde el espacio vertical es crítico.