Akkordeon-Element
Ein responsives Akkordeon-Menü zum Ein- und Ausklappen von Inhalten.
Demo
Dies ist der Inhalt des ersten Abschnitts. Hier können beliebige Inhalte stehen.
Dies ist der Inhalt des zweiten Abschnitts. Das Akkordeon unterstützt HTML-Inhalte wie fette Schrift oder Links.
Dies ist der Inhalt des dritten Abschnitts. Die Akkordeon-Elemente können durch JavaScript geöffnet und geschlossen werden.
Code
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">Abschnitt 1<i class="fas fa-chevron-down"></i></div>
<div class="accordion-content">
<p>Dies ist der Inhalt des ersten Abschnitts. Hier können beliebige Inhalte stehen.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Abschnitt 2<i class="fas fa-chevron-down"></i></div>
<div class="accordion-content">
<p>Dies ist der Inhalt des zweiten Abschnitts. Das Akkordeon unterstützt HTML-Inhalte wie <strong>fette Schrift</strong> oder <a href="#">Links</a>.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Abschnitt 3<i class="fas fa-chevron-down"></i></div>
<div class="accordion-content">
<p>Dies ist der Inhalt des dritten Abschnitts. Die Akkordeon-Elemente können durch JavaScript geöffnet und geschlossen werden.</p>
</div>
</div>
</div>
.accordion {
width: 100%;
max-width: 600px;
margin: 0 auto;
border-radius: 4px;
overflow: hidden;
}
.accordion-item {
border: 1px solid #e0e0e0;
margin-bottom: 5px;
border-radius: 4px;
overflow: hidden;
}
.accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background-color: #f5f5f5;
cursor: pointer;
font-weight: 500;
transition: background-color 0.3s;
}
.accordion-header:hover {
background-color: #ebebeb;
}
.accordion-header i {
transition: transform 0.3s;
}
.accordion-item.active .accordion-header {
background-color: #e6e6e6;
}
.accordion-item.active .accordion-header i {
transform: rotate(180deg);
}
.accordion-content {
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease;
}
.accordion-item.active .accordion-content {
padding: 15px 20px;
max-height: 500px;
transition: max-height 0.5s ease-in, padding 0.3s ease;
}
.accordion-content p {
margin: 0;
line-height: 1.6;
}
document.addEventListener('DOMContentLoaded', function() {
const accordionHeaders = document.querySelectorAll('.accordion-header');
accordionHeaders.forEach(header => {
header.addEventListener('click', function() {
const accordionItem = this.parentElement;
// Prüfen, ob dieses oder ein anderes Element aktiv ist
const isActive = accordionItem.classList.contains('active');
// Optional: Alle schließen, bevor man eines öffnet
// document.querySelectorAll('.accordion-item').forEach(item => {
// item.classList.remove('active');
// });
// Das geklickte Element umschalten
if (isActive) {
accordionItem.classList.remove('active');
} else {
accordionItem.classList.add('active');
}
});
});
});
Erklärung
Dieses Akkordeon-Element bietet eine platzsparende Möglichkeit, Inhalte zu organisieren. Es funktioniert über den folgenden Mechanismus:
- Die
accordion-item
-Klasse enthält jeweils einen Header und einen Content-Bereich - Beim Klick auf den Header wird die
active
-Klasse hinzugefügt oder entfernt - CSS-Transitionen sorgen für eine flüssige Animation beim Öffnen und Schließen
- Die
max-height
-Eigenschaft wird für die Animation verwendet, stattdisplay: none
Das JavaScript ist minimal gehalten und kümmert sich nur um das Umschalten der Klassen. Es kann leicht angepasst werden, um nur ein Element gleichzeitig geöffnet zu halten.