W3.CSS Akkordeons
Klicken Sie unten auf die Schaltflächen "Bereich öffnen", um zu sehen, wie Akkordeons funktionieren:
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
Akkordeon
Ein Akkordeon wird verwendet, um HTML-Inhalte anzuzeigen (und zu verbergen).
Verwenden Sie die w3-hide- Klasse, um den Akkordeon-Inhalt auszublenden.
Verwenden Sie eine beliebige Schaltfläche, um den Inhalt zu öffnen und zu schließen:
Beispiel
<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>
Sowohl das Element, das zum Öffnen des Akkordeons verwendet wird, als auch der Inhalt des Akkordeons können beliebige HTML-Elemente sein.
Akkordeon vs. Dropdown
Diese Tabelle zeigt den Unterschied zwischen einem Akkordeon und einem Dropdown:
| Akkordeon | Dropdown-Liste |
|---|---|
| Inhalt schiebt den Seiteninhalt nach unten | Inhalt legt sich über den vorhandenen Seiteninhalt |
| Inhalte sind oft zu 100 % breit | Inhalt ist 160 Pixel breit (Standard) |
| Wird oft verwendet, um mehrere Abschnitte zu öffnen | Wird oft verwendet, um einen Abschnitt zu öffnen |
Akkordeons
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.
Dropdowns
Akkordeon-Knöpfe
Sie können jedes HTML-Element verwenden, um den Akkordeon-Inhalt zu öffnen. Wir bevorzugen eine Schaltfläche mit einer w3-Block- Klasse, um die gesamte Breite der Seite (100 % Breite) zu überspannen.
Denken Sie daran, dass Schaltflächen in W3.CSS standardmäßig zentriert sind. Verwenden Sie stattdessen die Klasse w3-left-align , wenn Sie sie linksbündig ausrichten möchten. Sie müssen jedoch nicht unserem Ansatz folgen - ein Akkordeon sieht so oder so gut aus:
Lorem ipsum...
Lorem ipsum...
Centered content as well!
Beispiel
<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>
Aktive Akkordeon-Tasten
Verwenden Sie JavaScript, um geöffnete (angeklickte) Akkordeons hervorzuheben:
Some text..
Some other text..
Beispiel
// 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", "");
}
Akkordeonbreite
Standardmäßig beträgt die Breite des Blocks 100 %. Um dies zu überschreiben, ändern Sie die CSS-Eigenschaft width des Akkordeon-Containers:
Some text..
Some text..
Some text..
Some text..
Beispiel
<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>
Akkordeon-Inhalt
Akkordeon mit Links:
Beispiel
<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>
Akkordeon als Liste:
- Jill
- Vorabend
- Adam
Beispiel
<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>
Akkordeon in einer Seitenleiste (Sie werden später mehr über Seitenleisten erfahren):
Beispiel
<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>
Animierte Akkordeons
Verwenden Sie eine der w3-animate- Klassen , um den Akkordeoninhalt einzublenden, zu zoomen oder einzuschieben:
Beispiel
<div id="Demo1" class="w3-hide
w3-animate-zoom">