JS Collapse (collapse.js)
Obter estilos base e suporte flexível para componentes dobráveis como acordeões e navegação.
Plugin dependência: Fechar exige as transições plugin para ser incluído na sua versão do Bootstrap.
Para um tutorial sobre collapsibles, leia nossa Bootstrap Collapse Tutorial .
The Collapse Plugin Classes
| Classe | Descrição | Exemplo |
|---|---|---|
| .collapse | Esconde o conteúdo | Tente |
| .collapse in | Mostra o conteúdo | Tente |
| .collapsing | Adicionado quando a transição começa, e removido quando ele termina | Tente |
Via data-* Atributos
Basta adicionar data-toggle="collapse" e um alvo de dados para elemento para atribuir automaticamente o controle de um elemento desmontável. O atributo-alvo de dados aceita um seletor CSS para aplicar o colapso para. Certifique-se de adicionar o colapso classe para o elemento desmontável. Se você gostaria que o padrão aberto, adicione a classe adicional.
Exemplo
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Tente você mesmo " Dica: Para adicionar o gerenciamento de grupos de acordeão a um controle dobrável, adicione o atributo de dados data-parent="#selector" .
via JavaScript
Habilitar manualmente com:
$('.collapse').collapse()Opções de colapso
Opções podem ser passadas através de atributos de dados ou JavaScript. Para atributos de dados, acrescentar o nome de opção para de dados, como na data-parent="" .
| Nome | Digitar | Padrão | Descrição |
|---|---|---|---|
| parent | selector | false | Todos os elementos recolhíveis sob o pai especificado será fechada quando este item dobrável é mostrado. (Semelhante ao comportamento acordeão tradicional - esta é dependente da classe de painel) - Ver exemplo abaixo |
| toggle | boolean | true | Alterna o elemento deformável no momento da invocação |
Métodos de colapso
A tabela a seguir lista os métodos Recolher tudo disponíveis.
| Método | Descrição | Tente |
|---|---|---|
| .collapse( options ) | Ativa o elemento dobrável com uma opção. Veja opções acima para valores válidos | |
| .collapse("toggle") | Alterna o elemento desmontável | Tente |
| .collapse("show") | Mostra o elemento desmontável | Tente |
| .collapse("hide") | Esconde o elemento desmontável | Tente |
Recolher Eventos
A tabela a seguir lista os eventos Recolher tudo disponíveis.
| Evento | Descrição | Tente |
|---|---|---|
| show.bs.collapse | Ocorre quando o elemento deformável está prestes a ser mostrado | Tente |
| shown.bs.collapse | Ocorre quando o elemento deformável está totalmente mostrado (após transições CSS foram concluídas) | Tente |
| hide.bs.collapse | Ocorre quando o elemento deformável está prestes a ser escondido | Tente |
| hidden.bs.collapse | Ocorre quando o elemento deformável está totalmente oculto (após transições CSS foram concluídas) | Tente |
Exemplos
simples dobrável
O exemplo a seguir faz um botão alternar o conteúdo expandindo e contraindo de um 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> Tente você mesmo " 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
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: A data-parent atributo garante 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 " Expandir e Recolher Alternar Ícone & texto
O exemplo a seguir altera o encerramento de texto aberto / e ícone ao abrir e fechar o conteúdo dobrá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');
});
}); Tente você mesmo " 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";
} Tente você mesmo "