Recolher Bootstrap JS
Recolher JS (collapse.js)
Obtenha estilos básicos e suporte flexível para componentes dobráveis, como acordeões e navegação.
Dependência de plug-in: Collapse requer que o plug-in de transições seja incluído em sua versão do Bootstrap.
Para um tutorial sobre Colapsíveis, leia nosso Tutorial de Colapso do Bootstrap .
As classes do plug-in Recolher
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | |
| .collapse in | Shows the content | |
| .collapsing | Added when the transition starts, and removed when it finishes |
Via dados-* Atributos
Basta adicionar data-toggle="collapse" e um data-target ao elemento para atribuir automaticamente o controle de um elemento recolhível. O atributo data-target aceita um seletor CSS ao qual aplicar o recolhimento. Certifique-se de adicionar o recolhimento de classe ao elemento recolhível. Se você quiser que ele seja aberto por padrão, adicione a classe adicional em.
Exemplo
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Dica: Para adicionar gerenciamento de grupo do tipo acordeão a um controle recolhível, adicione o atributo de dados data-parent="#selector".
Por JavaScript
Ative manualmente com:
$('.collapse').collapse()
Opções de recolhimento
As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-parent="".
| Name | Type | Default | Description |
|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class) - See example below |
| toggle | boolean | true | Toggles the collapsible element on invocation |
Métodos de recolhimento
A tabela a seguir lista todos os métodos de recolhimento disponíveis.
| Method | Description | Try it |
|---|---|---|
| .collapse(options) | Activates the collapsible element with an option. See options above for valid values | |
| .collapse("toggle") | Toggles the collapsible element | |
| .collapse("show") | Shows the collapsible element | |
| .collapse("hide") | Hides the collapsible element |
Recolher eventos
A tabela a seguir lista todos os eventos de recolhimento disponíveis.
| Event | Description | Try it |
|---|---|---|
| show.bs.collapse | Occurs when the collapsible element is about to be shown | |
| shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | |
| hide.bs.collapse | Occurs when the collapsible element is about to be hidden | |
| hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) |
Mais exemplos
Simples dobrável
O exemplo a seguir faz com que um botão alterne o conteúdo de expansão e redução de outro elemento:
Exemplo
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
Simple collapsible
</button>
<div id="demo" class="collapse in">
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>
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
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: O data-parentatributo garante 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>
Expandir e Recolher Alternar Ícone e Texto
O exemplo a seguir altera o texto e o ícone abrir/fechar ao abrir e fechar o conteúdo recolhível:
Exemplo
$(document).ready(function(){
$("#demo").on("hide.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
});
});
Ou você pode usar CSS:
Exemplo
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content is hidden */
.btn.collapsed:after {
content: "\e080";
}