Acordeões W3.CSS
Clique nos botões "Abrir Seção" abaixo para ver como os acordeons funcionam:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
Acordeão
Um acordeão é usado para mostrar (e ocultar) o conteúdo HTML.
Use a classe w3-hide para ocultar o conteúdo do acordeão.
Use qualquer tipo de botão para abrir e fechar o conteúdo:
Exemplo
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Open Section 1</button>
<div id="Demo1" class="w3-container
w3-hide">
<p>Some text..</p>
</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 é usado para abrir o acordeão quanto o conteúdo do acordeão podem ser qualquer elemento HTML.
Acordeão vs. Suspensão
Esta tabela mostra a diferença entre um acordeão e um menu suspenso:
| Acordeão | Suspenso |
|---|---|
| O conteúdo empurra o conteúdo da página para baixo | O conteúdo se sobrepõe ao conteúdo da página existente |
| O conteúdo geralmente é 100% amplo | O conteúdo tem 160 pixels de largura (padrão) |
| Muitas vezes usado para abrir várias seções | Muitas vezes usado para abrir uma seção |
Acordeões
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Listas suspensas
Botões de acordeão
Você pode usar qualquer elemento HTML para abrir o conteúdo do acordeão. Preferimos um botão com uma classe w3-block , para abranger toda a largura da página (100% de largura).
Lembre-se de que os botões no W3.CSS são centralizados por padrão. Use a classe w3-left-align se quiser que eles sejam alinhados à esquerda. No entanto, você não precisa seguir nossa abordagem - um acordeão ficará bem de qualquer maneira:
Lorem ipsum...
Lorem ipsum...
Centered content as well!
Exemplo
<button onclick="myFunc('Demo1')"
class="w3-button">
Normal button</button>
<div id="Demo1" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align
w3-green">
Left aligned and full-width</button>
<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn w3-block
w3-red">
Centered and full-width</button>
<div id="Demo3"
class="w3-hide w3-center">
<p>Centered content as well!</p>
</div>
Botões de acordeão ativos
Use JavaScript para destacar acordeões que estão abertos (clicados):
Some text..
Some other text..
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", "");
}
Largura do acordeão
Por padrão, a largura do bloco é 100%. Para substituir isso, altere a propriedade de largura CSS do contêiner de acordeão:
Some text..
Some text..
Some text..
Some text..
Exemplo
<div class="w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-button w3-block">
50%
</button>
<div id="Demo1" class="w3-hide">
<p>Some text..</p>
</div>
</div>
Conteúdo do acordeão
Acordeão com links:
Exemplo
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 3</a>
</div>
Acordeão como uma lista:
- Jill
- véspera
- Adão
Exemplo
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
Acordeão dentro de uma barra lateral (você aprenderá mais sobre barras laterais mais tarde):
Exemplo
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
<div
id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item
w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
Acordeões Animados
Use qualquer uma das classes w3-animate- para desvanecer, ampliar ou deslizar no conteúdo do acordeão:
Exemplo
<div id="Demo1" class="w3-hide
w3-animate-zoom">