64 - Componente : collapse

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:

bootstrap 5 collapse

Y luego de presionarse el hipervínculo se muestra todo el contenido del div oculto:

bootstrap 5 collapse

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:

bootstrap 5 collapse

Múltiples áreas

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:

bootstrap 5 collapse

La propiedad data-bs-target="#area1" indica que área debe mostrar u ocultar.

Ejecutar Ejemplo

Retornar