Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Einfaches Accordion
Erstellen eines einfachen Accordions.
Beim Klick auf ein Feld wird ein Textfeld darunter eingeblendet.
Ebenso verändert sich das Icon an der rechten Seite.
Beim erneuten Klick auf das Feld verschwindet das Textfeld darunter wieder.
Natürlich können auch Bilder in die Felder darunter eingefügt werden.
<button class="accordion">Erster Abschnitt </button>
<div class="panel">
<p>Lorem ipsum ...</p>
</div>
<button class="accordion">Zweiter Abschnitt</button>
<div class="panel">
<p>Lorem ipsum ...</p>
</div>
<button class="accordion">Dritter Abschnitt</button>
<div class="panel">
<p>Lorem ipsum ...</p>
</div>
// Button mit Klasse accordion: Erster Abschnitt
// div mit Klasse panel
// Darin der ausklappbare Text
// accordion wird immer wiederholt
accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion:after {
content: '\02795';
font-size: 10px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796";
}
//Klasse accordion
// Hintergrundfarbe
// Schriftfarbe
// Änderung des Cursors
// Innenabstand
// Weite
// Textausrichtung
// kein Begrenzungsrahmen
// Keine Outline
// Reaktionszeit 0,4 Sekunden
// Aktives Feld oder bei Berührung mit Maus
// Hintergrundfarbe
// Klasse Panel also Textfeld
// Innenabstand
// Hintergrundfarbe
// legt fest, dass alle eingeklappt sind
// Kein Abstand zwischen den Kästen
// Reaktionszeit mit Ease-out Bewegungsentschleunigung
// Klasse accordion rechte Seite
// Unicode für +
// Schriftgröße
// Farbe
// Rechtsbündig
// linker Außenabstand
// Klasse active rechte Seite
// Unicode für -
var acc = document. getElementsByClassName ("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener ("click", function() {
this.classList.toggle ("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null; }
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
// Vaiable acc = Ausgabe accordion
// Anlegen von i
// for-Schleife
// Wenn das Feld gecklickt wurde, ist die Klasse active zuständig
// Variable panel = gibt das Element zurück, das unmittelbar auf das angegebene Element auf derselben Baumebene folgt
// If-else-Schleife
// gibt an, dass das Textfeld von der Überklasse active geöffnet wird, solange es im click-Zustand ist