La componente collapse permite mostrar u ocultar el contenido de un "div" cuando se presiona un botón o ancla.
Para su funcionamiento requiere importar la librería de Javascript.
La clase involucrada para su funcionamiento se llama "collapse".
Veamos una página que cuando se presiona un hipervínculo se muestra un recuadro con un texto.
<!doctype html> <html> <head> <title>Prueba de Bootstrap 5</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"> </head> <body> <div class="container"> <a href="#politica" data-bs-toggle="collapse">Políticas de privacidad</a> <div id="politica" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script> </body> </html>
El hipervínculo debe definir la propiedad data-bs-toggle con el valor "collapse" y la propiedad href con el id definido en el div más el caracter #:
<a href="#politica" data-bs-toggle="collapse">Políticas de privacidad</a>
Luego el div que inicialmente se encuentra oculto debe tener definidas las propiedades "id" y la clase "collapse":
<div id="politica" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
Antes de presionarse el hipervínculo tenemos en el navegador:
Y luego de presionarse el hipervínculo se muestra todo el contenido del div oculto:
Si necesitamos que cuando carga la página el contenido del div esté visible y que eventualmente el visitante lo pueda ocultar debemos agregar la clase "show":
<div id="politica" class="collapse show">
Para la apertura o cerrado del div podemos utilizar la etiqueta "button" en lugar del ancla:
<div class="container"> <button class="btn btn-warning" href="#politica" data-bs-toggle="collapse">Políticas de privacidad</button> <div id="politica" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div>
Como resultado tenemos:
Podemos mostrar y ocultar varias áreas:
<!doctype html> <html> <head> <title>Prueba de Bootstrap 5</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"> </head> <body> <div class="container"> <p> <a href="#area1" data-bs-toggle="collapse" data-bs-target="#area1">Area 1</a> <a href="#area2" data-bs-toggle="collapse" data-bs-target="#area2">Area 2</a> </p> <div class="row"> <div class="col"> <div class="collapse multi-collapse" id="area1"> <div class="card card-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui. </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="area2"> <div class="card card-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui. </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script> </body> </html
Como resultado tenemos:
La propiedad data-bs-target="#area1" indica que área debe mostrar u ocultar.