Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.
Um painel com título visível e conteúdo oculto
Ut inventore deserunt magnam doloribus modi quia laboriosam quis provident. temporibus est praesentium accusamus est aut dolorum praesentium et illum nesciunt sint quo. atque autem tenetur unde temporibus placeat commodi suscipit est nisi qui voluptas. et eum officia cupiditate. accusantium sit mollitia sit in quidem distinctio
Ut inventore deserunt magnam doloribus modi quia laboriosam quis provident. temporibus est praesentium accusamus est aut dolorum praesentium et illum nesciunt sint quo. atque autem tenetur unde temporibus placeat commodi suscipit est nisi qui voluptas. et eum officia cupiditate. accusantium sit mollitia sit in quidem distinctio
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>
Descrição para este collapse
Id labore temporibus eos laboriosam. dolore quas sunt eum nam nobis quod eligendi aliquid optio distinctio ea. deleniti nisi repellendus voluptas corporis odit at nihil suscipit id eum eveniet aliquam sunt sed. est reprehenderit saepe similique nihil sed. dolorem ea quae nobis labore rerum
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.
Odit deserunt et suscipit alias. doloribus quo quos minima dolorem repellendus ducimus. saepe ut amet quis fugit eos omnis ut consequatur illo ratione itaque. facilis alias provident placeat dolorem nisi maiores. omnis ad aliquam voluptatibus officia temporibus sunt commodi voluptates sed molestiae. temporibus non eos delectus. quia excepturi itaque voluptatibus labore
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.
Sed rerum voluptate placeat ut qui autem aut fugiat corrupti. fugit est vel quisquam et amet repellendus nisi qui. labore possimus quas sit a qui alias sequi harum enim ratione id quaerat. rerum ut illo adipisci cupiditate dicta voluptatibus debitis et quia vitae error
Sed rerum voluptate placeat ut qui autem aut fugiat corrupti. fugit est vel quisquam et amet repellendus nisi qui. labore possimus quas sit a qui alias sequi harum enim ratione id quaerat. rerum ut illo adipisci cupiditate dicta voluptatibus debitis et quia vitae error
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
})