Bootstrap 4 Recolher
Dobrável básico
Recolhíveis são úteis quando você deseja ocultar e mostrar uma grande quantidade de conteúdo:
Exemplo
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Exemplo explicado
A .collapseclasse indica um elemento recolhível (um <div> em nosso exemplo); este é o conteúdo que será mostrado ou ocultado com um clique de um botão.
Para controlar (mostrar/ocultar) o conteúdo recolhível, adicione o data-toggle="collapse"atributo a um elemento <a> ou <button>. Em seguida, adicione o data-target="#id"atributo para conectar o botão ao conteúdo recolhível (<div id="demo">).
Observação: para elementos <a>, você pode usar o hrefatributo em vez do data-target
atributo:
Exemplo
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Por padrão, o conteúdo recolhível fica oculto. No entanto, você pode adicionar a .showclasse para mostrar o conteúdo por padrão:
Exemplo
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
Acordeão
O exemplo a seguir mostra um acordeão simples estendendo o componente do cartão.
Nota: Use o data-parentatributo para certificar-se de que todos os elementos recolhíveis sob o pai especificado serão fechados quando um dos itens recolhíveis for mostrado.
Exemplo
<div id="accordion">
<div class="card">
<div
class="card-header">
<a class="card-link"
data-toggle="collapse" href="#collapseOne">
Collapsible
Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseTwo">
Collapsible
Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseThree">
Collapsible
Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
</div>
Referência Completa de Recolher Bootstrap 4
Para obter uma referência completa de todas as opções, métodos e eventos de recolhimento, acesse nosso Bootstrap 4 JS Collapse Reference .