Collapse

Agrupando grandes quantidades de informações.

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.

No Locaweb Style alteramos o visual que vem do boostrap, basta inserir a classe ls-collapse. Veja os exemplos abaixo:

Exemplo de layout com formulário

Você pode colocar formulários da maneira que quiser aqui dentro.

Um formulário de cadastro:


	
		
			Título do Collapse
			Descrição do collapse, se houver.
		
	
	
		

			Aqui é onde você coloca o conteúdo do Collapse

O collapse é responsivo, logo se adapta de acordo com o tamanho da tela do usuário. Como todos elementos do Locaweb Style são responsivos, os elementos que ficarão dentro do collapse não devem que quebrar na mudança de largura de tela.

Accordion para formulários em etapas

Para criar em formulários em etapas utilize o componente Accordion que é um conjunto de Collapses que interagem entre si.

Unindo Collapses a elementos de formulários

Basta criar uma div com a classe no-style-collapse envolvendo os collapses

Se o elemento já vier checado automaticamente o collapse estará aberto.

Elemento [checkbox]

Checkbox 1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Checkbox 2

Checkbox 3

Checkbox 1

Checkbox 2

Checkbox 3

Elemento [radio]

Nesse caso precisamos criar um id na classe no-style-collapse e adicionar o atributo data-parent com o mesmo valor do id no input[radio].

Opçao 1

Opçao 2

Opçao 3

Opçao 1

Opçao 2

Opçao 3

Utilização com atributos

Dentro do elemento .panel-heading deve haver qualquer elemento HTML com os seguintes atributos: data-toggle="collapse", que avisa que aquele trigger se refere a um collapse e data-target="#id" que define o collapse alvo.

Atenção:

Se você estiver usando um link como trigger, o atributo data-target é dispensável. Nesse caso você pode colocar o alvo direto no atributo href="#id" do link.

Utilização com Javascript

Ative um collapse manualmente usando o código abaixo:

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

Métodos

Ativa seu conteúdo como um elemento de collapse.

$('#myCollapsible').collapse({
	toggle: false
});

método	descrição
.collapse('toggle')	Alterna entre show e hide um elemento de collapse.
.collapse('show')	Abre um elemento collapse.
.collapse('hide')	Fecha um elemento collapse.

Eventos

Evento	Descrição
show.bs.collapse	Este evento é disparado imediatamente quando a instância `show` é chamada.
shown.bs.collapse	Este evento é disparado quando um elemento de collapse está visível para o usuário. Irá esperar pela transição do CSS ser completada.
hide.bs.collapse	Este evento é disparado imediatamente quando o método `hide` for chamado.
hidden.bs.collapse	Este evento é disparado quando um elemento de collapse ficou escondido para o usuário. Ele espera até as transições do CSS terminarem.

$('#myCollapsible').on('hidden.bs.collapse', function() {
	// Faça algo aqui
});

LOCAWEB STYLE

Documentação Locaweb Style