Bootstrap 4 - Recolher
Descrição
O componente de recolhimento é usado para mostrar ou ocultar o conteúdo usando a classe .collapse . O conteúdo pode ser reduzido adicionando âncora de atributo data-toggle = "collapse" ou elemento de botão. O id desses elementos faz referência ao id do conteúdo para recolher os dados.
Recolher usando link
Você pode recolher o conteúdo com a tag <a> usando o valor href do ID do conteúdo a ser recolhido.
O exemplo a seguir demonstra isso -
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Collapse with Link</h2>
<p>
<a class = "btn btn-info" data-toggle = "collapse"
href = "#collapsewithlink" role = "button" aria-expanded = "false"
aria-controls = "collapsewithlink">Click Me</a>
</p>
<div class = "collapse" id = "collapsewithlink">
<div class = "card card-body">
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.
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -
Resultado
Recolher usando o botão
Você pode recolher o conteúdo com a tag <button> usando o atributo data-target com o valor do ID do conteúdo a ser recolhido.
O exemplo a seguir demonstra isso -
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Collapse with Button</h2>
<p>
<button class = "btn btn-indo" type = "button" data-toggle = "collapse"
data-target = "#collapsewithbutton" aria-expanded = "false"
aria-controls = "collapsewithbutton">Click Me</button>
</p>
<div class = "collapse" id = "collapsewithbutton">
<div class = "card card-body">
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.
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -
Resultado
Acordeão
Você pode usar o conteúdo que pode ser recolhido para fazer um acordeão que costuma ser usado para conteúdo como perguntas frequentes, visões gerais etc.
O exemplo a seguir especifica um acordeão simples estendendo o componente do cartão -
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Accordion </h2>
<div id = "accordion">
<div class = "card">
<div class = "card-header">
<a class = "card-link" data-toggle = "collapse" href = "#collapseOne">
Accordion #1
</a>
</div>
<div id = "collapseOne" class = "collapse show" data-parent = "#accordion">
<div class = "card-body">Content for Accordion #1.</div>
</div>
</div>
<div class = "card">
<div class = "card-header">
<a class = "collapsed card-link" data-toggle = "collapse" href = "#collapseTwo">
Accordion #2
</a>
</div>
<div id = "collapseTwo" class = "collapse" data-parent = "#accordion">
<div class = "card-body">Content for Accordion #2.</div>
</div>
</div>
<div class = "card">
<div class = "card-header">
<a class = "collapsed card-link" data-toggle = "collapse" href = "#collapseThree">
Accordion #3
</a>
</div>
<div id = "collapseThree" class = "collapse" data-parent = "#accordion">
<div class = "card-body"> Content for Accordion #3.</div>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -