dobrável básica
Collapsibles são úteis quando você quer esconder e mostrar 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> Tente você mesmo " exemplo Explicado
O .collapse classe indica um elemento deformável (a <div> em nosso exemplo); este é o conteúdo que será mostrado ou oculto com um clique de um botão.
Para controlar (Show / Hide) o conteúdo dobrável, adicione a data-toggle="collapse" atributo a um <a> ou um <button> elemento. Em seguida, adicione a data-target="#id" atributo para ligar o botão com o conteúdo dobrável (<div id="demo">) .
Nota: Para <a> elementos, você pode usar o href atributo 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> Tente você mesmo " Por padrão, o conteúdo dobrável está escondido. No entanto, você pode adicionar o .in classe para mostrar o conteúdo por padrão:
Painel dobrável
O exemplo a seguir mostra um painel dobrá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> Tente você mesmo " Dobrável Grupo Lista
- Um
- Dois
- Três
O seguinte mostra um painel flexível com um grupo de listas 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> Tente você mesmo " Acordeão
O exemplo a seguir mostra um acordeão simples, estendendo o componente do painel.
Nota: Use o data-parent atributo para se certificar de que todos os elementos recolhíveis sob o pai especificado será fechado quando um dos itens dobrável é 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> Tente você mesmo " Completa Bootstrap Fechar Referência
Para uma referência completa de todos os colapso opções, métodos e eventos, ir ao nosso Bootstrap JS Fechar Referência .