[Bootstrap 3] Crear un Accordion o Acordeon

Un acordeon o accordion en Bootstrap 3 es un componente uqe sirve para agrupar datos de una manera interactiva ya que el usuario puede desplegar las opciones.

El componente Accordion (o acordeón) en Bootstrap 3 es una herramienta excelente para organizar grandes cantidades de contenido en un espacio reducido. Permite agrupar datos de manera interactiva, dejando que el usuario decida qué secciones desplegar y cuáles mantener ocultas.

En la imagen de arriba les muestro al accordion y a continuacion les dejo el codigo solo para el accordion.

Codigo de Accordion para Bootstrap 3

A continuación, presento el código base para implementar un acordeón funcional. Este componente utiliza el plugin de JavaScript Collapse de Bootstrap para gestionar las transiciones.

Este codigo lo deben colocar dentro de un elemento “<div class=col-md-12></div>” o el equivalente donde quieran que se muestre el accordion.

Como pueden ver el codigo es muy facil y es necesario incluir la libreria jquery para que el componente funcione.

💡 Tips para un Acordeón Profesional

• Accesibilidad (ARIA): Asegúrate de que los botones que despliegan el acordeón tengan los atributos aria-expanded="false" y aria-controls="id-del-contenido". Esto ayuda a los lectores de pantalla a entender que el componente es interactivo.
• Gestión del Estado Inicial: Si quieres que una sección esté abierta al cargar la página, simplemente añade la clase in al contenedor panel-collapse. Ejemplo: <div id="collapseOne" class="panel-collapse collapse in">.
• Iconos dinámicos: Para una mejor UX, cambia el icono (como un + o -) cuando el panel esté abierto o cerrado usando un poco de jQuery. Esto le indica visualmente al usuario que la sección es expandible.
• Evita el exceso de contenido: Aunque el acordeón ahorra espacio, no satures cada sección con demasiada información. Si el texto es muy extenso, el usuario puede perder la noción de dónde está.
• Compatibilidad: Recuerda que Bootstrap 3 requiere la librería jQuery cargada antes del JS de Bootstrap. Si ves que el acordeón “salta” o no abre, verifica en la consola del navegador que no tengas conflictos de versiones de jQuery.

Accordion en Bootstrap 5

El acordeon o accordion en Bootstrap 5 tiene el mismo funcionamiento pero el nuevo diseño de bootstrap 5 y las clases modificadoras.

<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" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Accordion Item 1
      </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="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Accordion Item 2
      </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="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Accordion Item 3
      </div>
    </div>
  </div>
</div>

Para que el accordion en bootstrap 5 pueda funcionar es necesario agregar el siguiente codigo javascript en el pie de nuetro documento HTML dentro de las etiquetas <script></script>.

const accordionCollapseElementList = document.querySelectorAll('#myAccordion .collapse')
const accordionCollapseList = [...accordionCollapseElementList].map(accordionCollapseEl => new bootstrap.Collapse(accordionCollapseEl))

Descargar

A continuacion les dejo el link de descarga para el ejemplo completo.

Link: https://drive.google.com/file/d/0B4VwLG0Dpi3tR3RrQ0VrUHRtUnc/view?resourcekey=0-ODQ14_aehsgQJwEvkBWH5g

Suscribirse

No olviden comparir con sus amigos y se pueden suscribir al blog para recibir correos cada vez que se publiquen nuevos articulos.

Te puede interesar: Flash Max: Plataforma para vender Cursos en Linea LMS