Imprimir este capítuloImprimir este capítulo

Repositório Códigos HTML

4. Acordion

 

Veja a seguir o código HTML comentado.

Código

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading"><a data-toggle="collapse" data-parent="#accordion" href="#collapseUm" class="collapsed"> Título #1 </a></div>
<div id="collapseUm" class="panel-collapse collapse">
<div class="panel-body">Texto</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><a data-toggle="collapse" data-parent="#accordion" href="#collapseDois" class="collapsed"> Título #2 </a></div>
<div id="collapseDois" class="panel-collapse collapse">
<div class="panel-body">Texto</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTres" class="collapsed"> Título #3 </a></div>
<div id="collapseTres" class="panel-collapse collapse">
<div class="panel-body">Texto</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><a data-toggle="collapse" data-parent="#accordion" href="#collapseQuatro" class="collapsed"> Título #4 </a></div>
<div id="collapseQuatro" class="panel-collapse collapse">
<div class="panel-body">Texto</div>
</div>
</div>

Comentário

Os trechos em salmão são o título e o texto do acordion. Aqui basta inserir os textos que você deseja, cuidando para não apagar nenhuma demarcação HTML.

Caso deseje inserir mais opções, copie o texto completo em azul claro, abaixo do último código, e substitua os trechos em verde usando o mesmo número para os dois.

Você também encontra o acordion nos "templates" disponíveis na barra de edição de textos.