Recolher Bootstrap
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 .inclasse para mostrar o conteúdo por padrão:
Exemplo
<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
Painel dobrável
O exemplo a seguir mostra um painel recolhível:
Exemplo
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
Grupo de lista recolhível
- One
- Two
- Three
O seguinte mostra um painel recolhível com um grupo de lista dentro:
Exemplo
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
Acordeão
O exemplo a seguir mostra um acordeão simples estendendo o componente do painel.
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 class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
</div>
</div>
</div>
Referência Completa de Recolhimento do Bootstrap
Para obter uma referência completa de todas as opções, métodos e eventos de recolhimento, acesse nossa Referência de Recolhimento do Bootstrap JS .