Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.
Um painel com título visível e conteúdo oculto
1
2
3
4
5
6
7
8
9
10
<div data-ls-module="collapse" data-target="#0" class="ls-collapse ">
<a href="#" class="ls-collapse-header">
<h3 class="ls-collapse-title">Título 1</h3>
</a>
<div class="ls-collapse-body" id="0">
<p>
dolorem
</p>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div data-ls-module="collapse" data-target="#30" class="ls-collapse ">
<a href="#" class="ls-collapse-header">
<h3 class="ls-collapse-title">
Titulo
</h3>
<p>
Descrição para este collapse
</p>
</a>
<div class="ls-collapse-body" id="30">
<p>
Earum ad optio esse saepe placeat incidunt dolores et laboriosam harum sit minus temporibus nesciunt. ut veritatis recusandae cum laborum dolorem ut culpa provident sequi odio in et eligendi et. qui alias perferendis assumenda. in illo modi earum distinctio commodi reiciendis voluptatem molestias quasi accusantium. id et ex quis deserunt sed rerum sed est culpa porro voluptatem eveniet. autem et error laborum non quia adipisci veritatis aut maiores ea est officia natus
</p>
</div>
</div>
Nos exemplos usamos o elemento a com a classe .ls-collapse-header, mas qualquer elemento, como um DIV por exemplo, pode receber essa classe.
Via javascript é adicionada as ARIAs abaixo:
| Estado do Collapse | Elemento | Wai-aria |
|---|---|---|
| Fechado | ls-collapse-header | aria-expanded="false" |
| Fechado | ls-collapse-body | aria-hidden="true" |
| Aberto | ls-collapse-header | aria-expanded="true" |
| Aberto | ls-collapse-body | aria-hidden="false" |
| Nome | Tipo | Descrição |
|---|---|---|
| ls-collapse-opened-always | classe | mantém um collapse sempre aberto |
| ls-collapse-opened | classe | inicia um collapse aberto |
Utilize a função .toggle() para controlar o comportamento do collapse.
1
locastyle.collapse.toggle('#element')
Você também pode utilizar outros elementos para abrir/fechar um collapse. Para isso, inicialize o módulo normalmente utilizando o data-ls-module="collapse" no elemento que deseja utilizar como trigger e também o atributo data-target="#target" para indicar o collapse alvo.
Accordeon é um conjunto de collapses agrupados, onde apenas um deles permanece aberto.
Um accordeon é um conjunto de collapses, como mostrados acima, com um elemento que os agrupa, com a classe .ls-collapse-group.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="ls-collapse-group">
<div data-ls-module="collapse" data-target="#accordeon0" class="ls-collapse ">
<a href="#" class="ls-collapse-header">
<h3 class="ls-collapse-title">Título 1</h3>
</a>
<div class="ls-collapse-body" id="accordeon0">
<p>
Ut voluptate et aut nostrum quibusdam dignissimos at velit ut. suscipit ab consequatur vitae. ut consectetur explicabo et aut sit sit ab tenetur ab qui molestias. odio officiis veniam et et ducimus quod temporibus ad et ipsam voluptate. odio nihil rerum tempore sunt quidem eum nisi molestiae. sit perspiciatis dolorum perferendis aliquid quae
</p>
</div>
</div>
<div data-ls-module="collapse" data-target="#accordeon1" class="ls-collapse ">
<a href="#" class="ls-collapse-header">
<h3 class="ls-collapse-title">Título 2</h3>
</a>
<div class="ls-collapse-body" id="accordeon1">
<p>
Ut voluptate et aut nostrum quibusdam dignissimos at velit ut. suscipit ab consequatur vitae. ut consectetur explicabo et aut sit sit ab tenetur ab qui molestias. odio officiis veniam et et ducimus quod temporibus ad et ipsam voluptate. odio nihil rerum tempore sunt quidem eum nisi molestiae. sit perspiciatis dolorum perferendis aliquid quae
</p>
</div>
</div>
</div>
Você pode escutar eventos de abre e fecha nos elementos de collapse, veja a referência abaixo.
| Evento | Descrição |
|---|---|
| collapse:opened | Quando um collapse abre, o evento |
| collapse:closed | Quando um collapse fecha, o evento |
Exemplo:
1
2
3
4
5
6
7
8
9
// Um collapse específico
$("#id-collapse").on('collapse:opened', function(){
// do something
})
// Todos os elementos de collapse
$(".ls-collapse").on('collapse:closed', function(){
// do something
})