Tema 21 · Dropdowns y Collapse

Menús Desplegables (Dropdowns) y Colapsables

Aprende a crear menús contextuales desplegables con .dropdown y paneles colapsables tipo acordeón con .collapse y el componente .accordion de Bootstrap 5.

Validación Visual de Formularios Ventanas Modales Emergentes (Modals)

Menús Desplegables (.dropdown)

Los menús desplegables muestran listas contextuales de enlaces y acciones al hacer clic en un botón activador. Bootstrap 5 utiliza la librería Popper.js internamente dentro del bundle oficial para posicionar el menú de forma inteligente sin salirse de la pantalla. 

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Opciones de Cuenta
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Mi Perfil</a></li>
    <li><a class="dropdown-item" href="#">Ajustes</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item text-danger" href="#">Cerrar Sesión</a></li>
  </ul>
</div>

Paneles Colapsables y Acordeones (.accordion)

El componente Acordeón permite condensar gran cantidad de información (como preguntas frecuentes FAQ) mostrando únicamente los títulos, expandiendo el contenido al hacer clic: 

<div class="accordion" id="acordeonFAQ">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#pregunta1">
        ¿Cómo obtengo mi certificado?
      </button>
    </h2>
    <div id="pregunta1" class="accordion-collapse collapse show" data-bs-parent="#acordeonFAQ">
      <div class="accordion-body">
        Al completar el 100% de los ejercicios prácticos de Kilopolis.
      </div>
    </div>
  </div>
</div>

⚡ Menú Desplegable y Acordeón Interactivo con Bootstrap 5

Haz clic en el botón de opciones para abrir el Dropdown y despliega las preguntas frecuentes en el Acordeón animado:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dropdowns y Acordeones Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 650px;">
    <!-- 1. Menú Desplegable -->
    <div class="card shadow-sm border-0 rounded-4 p-4 bg-white mb-4">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h5 class="fw-bold mb-1">Panel de Usuario</h5>
          <small class="text-muted">Menú desplegable con Popper</small>
        </div>

        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle rounded-pill px-4 fw-semibold" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            Acciones &raquo;
          </button>
          <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 rounded-3">
            <li><h6 class="dropdown-header">Gestión Kilopolis</h6></li>
            <li><a class="dropdown-item">Ver Mis Calificaciones</a></li>
            <li><a class="dropdown-item">Descargar Certificados</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item text-danger">Cerrar Sesión Segura</a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 2. Acordeón de Preguntas Frecuentes -->
    <div class="card shadow-sm border-0 rounded-4 p-4 bg-white">
      <h4 class="fw-bold text-dark mb-3">Preguntas Frecuentes (FAQ)</h4>

      <div class="accordion" id="faqKilopolis">
        <!-- Pregunta 1 -->
        <div class="accordion-item border-0 border-bottom">
          <h2 class="accordion-header">
            <button class="accordion-button fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
              ¿Se requiere instalar algún programa para usar el Sandbox?
            </button>
          </h2>
          <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqKilopolis">
            <div class="accordion-body text-secondary small">
              No necesitas instalar nada. Todo el código de Bootstrap 5, CSS3, JavaScript y PHP se procesa de forma nativa directamente en la nube de Kilopolis.
            </div>
          </div>
        </div>

        <!-- Pregunta 2 -->
        <div class="accordion-item border-0">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
              ¿Por qué Bootstrap 5 eliminó la dependencia de jQuery?
            </button>
          </h2>
          <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqKilopolis">
            <div class="accordion-body text-secondary small">
              Para mejorar el rendimiento de carga y velocidad de ejecución, aprovechando las capacidades modernas de JavaScript ES6+ soportadas por todos los navegadores actuales.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de Bootstrap 5.3 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.