59 - 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 las librerías 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 4</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<a href="#politica" data-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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
El hipervínculo debe definir la propiedad data-toggle con el valor "collapse" y la propiedad href con el id definido en el div más el caracter #:
<a href="#politica" data-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-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:
