Produto
PRODUTO
Accordion
O Accordion permite que os usuários expandam e reduzam seções do conteúdo. Eles são melhor usados quando os usuários precisam consumir áreas específicas de conteúdo dentro de uma página e o espaço vertical é limitado.
Tipos
Os estados de interação indicados abaixo se replicam para todas as suas variações de tipo.
Padrão
Com borda
Estados de interação
Os estados de interação indicados abaixo se replicam para todas as suas variações de tipo.
Padrão
Normal
Hover
Aberto 
Label
Label
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Aberto em lista
Item 1
Item 2
Item 3
Item 4
Item 5
Item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Item 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Item 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Item 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Item 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Com borda
Normal
Hover
Aberto
Label
Label
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Aberto em lista
Item 1
Item 2
Item 3
Item 4
Item 5
Item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Item 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Item 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Item 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Item 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Código
HTML 
Exibir código
Copiar código
Exibir código
<div class="accordion-box">
<a href="#" class="link accordion-toggle close">
<span class="icon">
<img src="/img/chevron-down.png" alt="Label">
</span>
Label
</a>
<div>
<div class="accordion-box bordered">
<a href="#" class="link accordion-toggle open">
<span class="icon">
<img src="/img/chevron-down.png" alt="Label">
</span>
Label
</a>
<div>
<div class="accordion-list">
<div class="accordion-box bordered">
<a href="#" class="link accordion-toggle">
<span class="icon">
<img src="/img/chevron-down.png" alt="Label">
</span>
Item 1
</a>
<div class="accordion-content collapsed" style="display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="accordion-box bordered">
<a href="#" class="link accordion-toggle close">
<span class="icon">
<img src="/img/chevron-down.png" alt="Label">
</span>
Item 2
</a>
<div class="accordion-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="accordion-box bordered">
<a href="#" class="link accordion-toggle">
<span class="icon">
<img src="/img/chevron-down.png" alt="Label">
</span>
Item 3
</a>
<div class="accordion-content collapsed" style="display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="accordion-box bordered">
<a href="#" class="link accordion-toggle">
<span class="icon">
<img src="/img/chevron-down.png" alt="Label">
</span>
Item 4
</a>
<div class="accordion-content collapsed">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="accordion-box bordered">
<a href="#" class="link accordion-toggle">
<span class="icon">
<img src="/img/chevron-down.png" alt="Label">
</span>
Item 5
</a>
<div class="accordion-content collapsed">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
SASS Exibir código
Copiar código
Exibir código
.accordion-box{
&:not(.bordered){
margin-bottom: 10px;
}
&.bordered{
border-radius: 4px;
border: 1px solid #ebebeb;
padding: 10px 20px;
}
.accordion-content{
&.collapsed{
display: none;
}
box-sizing: border-box;
font-family: Lato;
font-size: 1em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.38;
letter-spacing: normal;
color: #1e2a54;
padding-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
.accordion-list &.bordered{
border-radius: 0;
margin-bottom: -1px;
&:first-child{
border-radius: 4px 4px 0 0;
}
&:last-child{
border-radius: 0 0 4px 4px;
}
}
}
JS Exibir código
Copiar código
Exibir código
$('body').on('click','a.accordion-toggle',function(e){
e.preventDefault();
var father=$(this).closest('.accordion-box');
var content=$(father).children('.accordion-content');
var list=$(father).closest('.accordion-list');
$(this).toggleClass('open close');
$('.accordion-box .accordion-content', list).not(content).slideUp();
$(father).children('.accordion-content').slideToggle();
});