Collapses são usados para organizar grandes quantidades de conteúdo que trazem uma informação ou comportamentos do sistema para a interação com o usuário. Veja os exemplos abaixo:

Collapses complexos

Geralmente estes collapses são utilizados para conter grandes quantidades de informação, formulários e etc. São usados em telas de configurações ou onde precisamos seccionar muita informação referente a um mesmo assunto.

Collapses simples

São collapses simples, para mostrar informações de forma rápida e descomplicada.

Repare que para fazer o collapse simples usa-se o mesmo código do collapse complexo. Com algumas alterações: 1. retiramos a borda padrão do lado esquerdo do header inserindo a classe noBorder na tag header. 2. Retirando o parágrafo contido na tag header.

Envolvemos os collapses dentro de um div chamado collapseGroup. Usar o collapseGroup é totalmente opcional, mas ele contém um padding que pode auxiliá-lo caso queira utilizá-lo dentro de alguma outro elemento.

<div class="collapseGroup">
	<div class="boxCollapse">
   		<header data-target="#contrateConvenioDesc" data-toggle="collapse" class="noBorder">
        	<h4><span>01.</span> Contrate um conv&ecirc;nio</h4>
        </header>
        <div class="collapse" id="contrateConvenioDesc">
            <p>Texto contúdo  </p>
            <p><a class="lnkSeta" href="#">Saiba mais</a></p>
        </div>
    </div>

	<div class="boxCollapse">
   		<header data-target="#configMeioPagtoDesc" data-toggle="collapse" class="noBorder">
        	<h4><span>02.</span> Configure um meio de pagamento</h4>
        </header>
        <div class="collapse" id="configMeioPagtoDesc">
            <p>Texto contúdo</p>
            <p><a class="lnkSeta" href="#">Saiba mais</a></p>
        </div>
    </div>

	<div class="boxCollapse">
   		<header data-target="#impMeioPagtoDesc" data-toggle="collapse" class="noBorder">
        	<h4><span>03.</span> Implemente seu meio de pagamento</h4>
        </header>
        <div class="collapse" id="impMeioPagtoDesc">
            <p>Texto contúdo</p>
            <p><a class="lnkSeta" href="#">Saiba mais</a></p>
        </div>
    </div>
</div>

Collapse com navegação

Collapse Desativado

Basta remover os atributos e classes da tag header

Utilização

Apenas coloque data-toggle="collapse" e o data-target para dar o controle de um elemento com collapse. Lembre-se de colocar a classe collapse para o elemento que terá o collapse. Se você quiser um determinado collapse já apareça aberto, insira a classe in.

Para o collapse ficar como um accordion, coloque o atributo data-parent="#seletor".

Se quiser ativar manualmente, utilize o código abaixo:

$(".collapse").collapse();

Eventos