Akkordeon
Ein Akkordeon wird verwendet, um zu zeigen (und verstecken) Inhalte, die in Abschnitte aufgeteilt wird.
Klicken Sie auf die "Open Abschnitt" Schaltflächen unten, um zu sehen, wie es funktioniert:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do TEMPOR eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Akkordeon mit Bildern:
Trolltunga, Norwegen
Die w3-Akkordeon - Klasse definiert ein Akkordeon und der w3-Akkordeon-Content - Klasse definiert die Teil angezeigt werden:
Beispiel
<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>Sowohl das Element, das verwendet wird, das Akkordeon zu öffnen und den Inhalt des Akkordeon kann jedes HTML-Element sein.
Akkordeon vs. Dropdown
Die folgende Liste zeigt den Unterschied zwischen einem Akkordeon und einer Drop-Down-:
Akkordeons
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do TEMPOR eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Inhalt ist 100% breit (erstreckt sich über die gesamte Breite des übergeordneten Elements)
- Beim Öffnen schiebt er den Seiteninhalt nach unten, falls vorhanden (position: relative)
- zu "öffnen" mehrere Abschnitte Häufig verwendete
Akkordeon-Buttons
Sie können einen beliebigen HTML-Element verwenden, das Akkordeon Inhalt zu öffnen. Wir bevorzugen eine Schaltfläche mit einem w3-btn-Block - Klasse, weil sie über die gesamte Breite des übergeordneten Elements erstreckt, genau wie das Akkordeon - Gehalt (100% Breite). Denken Sie daran, dass die Tasten in W3.CSS standardmäßig zentriert sind. Verwenden Sie die w3-links-align Klasse , wenn man sie linksbündig statt wollen. Allerdings müssen Sie nicht unser Ansatz folgen - ein Akkordeon gut so oder so aussehen:
Lorem ipsum ...
Lorem ipsum ...
wie gut zentriert Inhalt!
Beispiel
<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>Aktive Akkordeon Buttons
Verwenden Sie JavaScript Akkordeons zu markieren, die offen sind (angeklickt):
Einige Text ..
Einige andere 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", "");
}Akkordeon Breite
Standardmäßig ist die Breite eines Akkordeons 100%. die CSS-Eigenschaft width des w3-Akkordeon-Container, um diese zu überschreiben, ändern:
Einige Text ..
Einige Text ..
Einige Text ..
Einige Text ..
Beispiel
<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>Akkordeon Inhalt
Akkordeon mit Links:
Beispiel
<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>Akkordeon als Karte mit Listen:
- Jill
- Vorabend
- Adam
Beispiel
<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>Akkordeon in einem Sidenav(Hinweis: Sie werden mehr über Seitennavigations später erfahren):
Beispiel
<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>Animierte Akkordeons
Verwenden Sie eine der w3-animate- Klassen zu verblassen, Zoom oder Folie in der Akkordeon - Gehalt: