Tudo que você precisa fazer é usar ...
data-toggle="collapse"
data-target="#ElementToExpandOnClick"
... no elemento em que você deseja clicar para acionar o efeito de recolher / expandir.
O elemento com data-toggle="collapse"
será o elemento para acionar o efeito. O data-target
atributo indica o elemento que será expandido quando o efeito for acionado.
Opcionalmente, você pode definir data-parent
se deseja criar um efeito acordeão em vez de dobrável independente, por exemplo:
Eu também adicionaria o seguinte CSS aos elementos com data-toggle="collapse"
se eles não forem <a>
tags, por exemplo:
.panel-heading {
cursor: pointer;
}
Aqui está um jsfiddle com o html modificado da documentação do Bootstrap 3 .