Collapse en Bootstrap 5

Bootstrap 5 es un framework de desarrollo web ampliamente utilizado que proporciona una variedad de componentes interactivos para mejorar la experiencia del usuario.

Uno de estos componentes es el Collapse, que permite mostrar u ocultar contenido de manera dinámica con solo hacer clic en un botón o enlace.

En esta guía completa, exploraremos el componente Collapse en Bootstrap 5, discutiendo cómo funciona, cómo implementarlo en tus proyectos y proporcionando ejemplos prácticos para su uso efectivo.

¿Qué es el Collapse?

El Collapse es un componente de interfaz de usuario que permite mostrar u ocultar contenido de manera dinámica. Cuando se activa, el contenido colapsa o se expande de forma suave, proporcionando una experiencia de usuario más interactiva y organizada.

El Collapse es útil para mostrar información adicional de manera oculta, como menús desplegables, detalles de productos, respuestas a preguntas frecuentes, entre otros.

Implementación Básica

En Bootstrap 5, el Collapse se puede implementar utilizando clases CSS y atributos de datos HTML. Veamos un ejemplo básico de cómo crear un Collapse:


<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Mostrar Contenido
</button>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    ¡Hola! Este es el contenido oculto que se mostrará cuando se active el Collapse.
  </div>
</div>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos creado un botón que activa el Collapse mediante el atributo data-bs-toggle="collapse" y especifica el objetivo del Collapse utilizando data-bs-target="#collapseExample". El contenido que queremos ocultar se encuentra dentro de un elemento con la clase collapse y un identificador único que coincide con el valor de data-bs-target.

Opciones de Configuración

Bootstrap 5 ofrece varias opciones de configuración para personalizar el comportamiento y la apariencia del Collapse. Algunas de las opciones más comunes incluyen:

  • Anidamiento: Puedes anidar Collapse dentro de otros elementos para crear estructuras más complejas.
  • Eventos: Puedes utilizar eventos JavaScript para realizar acciones específicas cuando se muestra u oculta un Collapse.
  • Transiciones: Bootstrap 5 utiliza transiciones CSS para animar la apertura y cierre del Collapse. Puedes personalizar la duración y el tipo de transición utilizando clases CSS o variables de Sass.

Ejemplos Prácticos

Menú Desplegable


<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Sección 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Contenido de la sección 1. Puede incluir enlaces, texto, imágenes, etc.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Sección 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Contenido de la sección 2. Puede incluir enlaces, texto, imágenes, etc.
      </div>
    </div>
  </div>
</div>

Lenguaje del código: HTML, XML (xml)

Detalles del Producto


<div class="card">
  <div class="card-header" id="headingOne">
    <h5 class="mb-0">
      <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Detalles del Producto
      </button>
    </h5>
  </div>

  <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
    <div class="card-body">
      Descripción detallada del producto. Puede incluir especificaciones, características, precios, etc.
    </div>
  </div>
</div>

Lenguaje del código: HTML, XML (xml)

Conclusiones

El Collapse es un componente esencial en el desarrollo de interfaces web interactivas y funcionales. Con Bootstrap 5, puedes implementar fácilmente Collapse en tus proyectos para mostrar u ocultar contenido de manera dinámica, mejorando así la experiencia del usuario.

Esperamos que esta guía completa te haya proporcionado los conocimientos necesarios para comenzar a utilizar Collapse en tus proyectos de Bootstrap 5. ¡Ahora es tu turno de crear interfaces web atractivas y fáciles de usar con este componente versátil!