Akkordeon-Element

Ein responsives Akkordeon-Menü zum Ein- und Ausklappen von Inhalten.

Demo

Abschnitt 1

Dies ist der Inhalt des ersten Abschnitts. Hier können beliebige Inhalte stehen.

Abschnitt 2

Dies ist der Inhalt des zweiten Abschnitts. Das Akkordeon unterstützt HTML-Inhalte wie fette Schrift oder Links.

Abschnitt 3

Dies ist der Inhalt des dritten Abschnitts. Die Akkordeon-Elemente können durch JavaScript geöffnet und geschlossen werden.

Code

HTML
CSS
JavaScript
<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, statt display: 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.

Verwendung

Akkordeons sind ideal für FAQs, Produktbeschreibungen, Seitennavigation oder andere Inhalte, die in Kategorien organisiert sind. Sie sparen Platz auf der Seite und lenken die Aufmerksamkeit des Benutzers auf den relevanten Inhalt.