Bootstrap 5 proporciona un componente llamado Collapse (colapso) que permite crear secciones de contenido que se pueden mostrar u ocultar al hacer clic en un botón o enlace. Este componente es útil para crear menús desplegables, secciones de preguntas frecuentes y otros elementos interactivos. A continuación, veremos cómo implementar y personalizar el componente Collapse en tus proyectos.
Ejemplo Básico de Collapse
HTML Básico
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collapse en Bootstrap 5</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- Botón que activa el colapso -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Mostrar/Ocultar Contenido
</button>
<!-- Contenido colapsable -->
<div class="collapse mt-3" id="collapseExample">
<div class="card card-body">
Este es el contenido colapsable.
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>Desglose del Código
Botón de Colapso:
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">La clase
btn btn-primaryda estilo al botón.data-bs-toggle="collapse"indica que el botón controla un colapso.data-bs-target="#collapseExample"especifica el ID del elemento que se colapsará.aria-expanded="false"yaria-controls="collapseExample"mejoran la accesibilidad.
Contenido Colapsable:
<div class="collapse mt-3" id="collapseExample">La clase
collapseindica que este contenido es colapsable.id="collapseExample"debe coincidir con el valor del atributodata-bs-targetdel botón.
Colapso Horizontal
Para crear un colapso horizontal, se añade la clase collapse-horizontal.
HTML para Colapso Horizontal
<div class="container mt-5">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHorizontal" aria-expanded="false" aria-controls="collapseHorizontal">
Mostrar/Ocultar Horizontalmente
</button>
<div class="collapse collapse-horizontal mt-3" id="collapseHorizontal">
<div class="card card-body">
Este es el contenido colapsable horizontalmente.
</div>
</div>
</div>Colapso con Múltiples Objetivos
Un solo botón puede controlar varios elementos colapsables.
HTML para Múltiples Objetivos
<div class="container mt-5">
<!-- Botones para colapsos individuales -->
<button class="btn btn-primary mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapse1" aria-expanded="false" aria-controls="multiCollapse1">Colapso 1</button>
<button class="btn btn-primary mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapse2" aria-expanded="false" aria-controls="multiCollapse2">Colapso 2</button>
<!-- Botón que controla ambos colapsos -->
<button class="btn btn-primary mb-2" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapse1 multiCollapse2">Colapso Ambos</button>
<!-- Contenidos colapsables -->
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapse1">
<div class="card card-body">
Contenido del colapso 1.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapse2">
<div class="card card-body">
Contenido del colapso 2.
</div>
</div>
</div>
</div>
</div>Desglose del Código
Botones Individuales:
Cada botón controla un solo colapso mediante
data-bs-targetapuntando a un ID específico.
Botón de Múltiples Objetivos:
data-bs-target=".multi-collapse"permite que un solo botón controle múltiples colapsos utilizando una clase compartida en lugar de un ID único.
Conclusión
El componente Collapse de Bootstrap 5 es una herramienta poderosa y flexible para crear secciones de contenido desplegable en tu sitio web. Puedes personalizarlo y extenderlo de muchas maneras para adaptarlo a tus necesidades específicas. Utilizando clases y atributos de datos, puedes crear interacciones ricas y dinámicas con muy poco código adicional.
