W3.CSS- accordeons
Klik op de "Open Sectie"-knoppen hieronder om te zien hoe accordeons werken:
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
Accordeon
Een accordeon wordt gebruikt om HTML-inhoud te tonen (en te verbergen).
Gebruik de klasse w3-hide om de accordeoninhoud te verbergen.
Gebruik een willekeurige knop om de inhoud te openen en te sluiten:
Voorbeeld
<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>
Zowel het element dat wordt gebruikt om de accordeon te openen als de inhoud van de accordeon kan elk HTML-element zijn.
Accordeon versus dropdown
Deze tabel laat het verschil zien tussen een accordeon en een dropdown:
| Accordeon | Laten vallen |
|---|---|
| Inhoud duwt de pagina-inhoud naar beneden | Inhoud ligt over bestaande pagina-inhoud |
| Inhoud is vaak 100% breed | Inhoud is 160px breed (standaard) |
| Vaak gebruikt om meerdere secties te openen | Vaak gebruikt om één sectie te openen |
accordeons
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.
Dropdownmenu's
Accordeon Knoppen
U kunt elk HTML-element gebruiken om de accordeoninhoud te openen. We geven de voorkeur aan een knop met een w3-blokklasse , die de volledige breedte van de pagina beslaat (100% breedte).
Onthoud dat knoppen in W3.CSS standaard gecentreerd zijn. Gebruik de klasse w3-left-align als u ze in plaats daarvan links-uitgelijnd wilt. U hoeft onze aanpak echter niet te volgen - een accordeon ziet er hoe dan ook goed uit:
Lorem ipsum...
Lorem ipsum...
Centered content as well!
Voorbeeld
<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>
Actieve accordeonknoppen
Gebruik JavaScript om accordeons te markeren die open zijn (geklikt op):
Some text..
Some other text..
Voorbeeld
// 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", "");
}
Accordeon Breedte
Standaard is de breedte van het blok 100%. Om dit te overschrijven, wijzigt u de CSS width-eigenschap van de accordeoncontainer:
Some text..
Some text..
Some text..
Some text..
Voorbeeld
<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>
Accordeon Inhoud
Accordeon met schakels:
Voorbeeld
<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>
Accordeon als lijst:
- Jill
- Vooravond
- Adam
Voorbeeld
<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>
Accordeon in een zijbalk (later leer je meer over zijbalken):
Voorbeeld
<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>
Geanimeerde accordeons
Gebruik een van de w3-animate- classes om de accordeoninhoud te vervagen, in te zoomen of te schuiven:
Voorbeeld
<div id="Demo1" class="w3-hide
w3-animate-zoom">