Acordeão
Um acordeão é usado para mostrar (e esconder) conteúdo que é dividido em seções.
Clique nos botões "Abrir" abaixo para ver como ele funciona:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Acordeão com imagens:
Trolltunga, Noruega
A classe w3-acordeão define um acordeão, e a classe-acordeão conteúdo w3 define a parte a ser exibida:
Exemplo
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Open Section 1
</button>
<div id="Demo1" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')"
class="w3-btn-block w3-left-align">
Open Section 2
</button>
<div id="Demo2" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
</div>
<script>
function myFunction(id) {
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show")
== -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>Tanto o elemento que é utilizado para abrir a acordeão e o conteúdo do acordeão pode ser qualquer elemento HTML.
Acordeão vs. suspensa
A lista abaixo mostra a diferença entre um acordeão e um menu suspenso:
acordeões
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- O conteúdo é de 100% de largura (abrange toda a largura do elemento pai)
- Quando aberto, ele empurra o conteúdo da página para baixo, se houver (position: relative)
- Muitas vezes usado para "abrir" múltiplas seções
acordeão Botões
Você pode usar qualquer elemento HTML para abrir o conteúdo acordeão. Nós preferimos um botão com uma classe btn-w3-bloco, porque se estende por toda a largura do seu elemento pai, assim como o conteúdo do acordeão (largura de 100%). Lembre-se que os botões em W3.CSS estão centrados por padrão. Use a classe w3-left-align se você quer que eles alinhados à esquerda em vez disso. No entanto, você não tem que seguir a nossa abordagem - um acordeão vai ficar bem de qualquer maneira:
Lorem ipsum ...
Lorem ipsum ...
Centrado conteúdo, bem!
Exemplo
<div class="w3-accordion w3-light-grey">
<button onclick="myFunc('Demo1')"
class="w3-btn">
Normal button
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-btn-block w3-left-align
w3-green">
Left aligned & full-width
</button>
<div id="Demo2" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn-block
w3-red">
Centered & full-width
</button>
<div id="Demo3"
class="w3-accordion-content w3-center">
<p>Centered content as well!</p>
</div>
</div>Acordeão ativos Botões
Use JavaScript para destacar acordeões que estão abertos (clicou):
Algum texto ..
Algum outro texto ..
Exemplo
// Add the w3-red class to all opened accordions
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += "
w3-red";
} else {
x.className = x.className.replace("w3-show",
"");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-red", "");
}acordeão Largura
Por padrão, a largura de um acordeão é de 100%. Para substituir isso, altere a propriedade de largura CSS do recipiente w3-acordeão:
Algum texto ..
Algum texto ..
Algum texto ..
Algum texto ..
Exemplo
<div class="w3-accordion w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-btn-block">
50%
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Some text..</p>
</div>
</div>conteúdo do acordeão
Acordeão com links:
Exemplo
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>Acordeão como um cartão com listas:
- Jill
- véspera
- Adão
Exemplo
<div class="w3-accordion w3-card-4">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
</div>Acordeão dentro de um Sidenav(Nota: você vai aprender mais sobre navegações colaterais mais tarde):
Exemplo
<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
<a href="#">Link</a>
<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">Accordion</a>
<div
id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="w3-dropdown-click">
<a onclick="myDropFunc()" href="#">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>Acordeões animados
Use qualquer uma das classes w3-animate- a desvanecer-se, zoom ou slide no conteúdo acordeão: