Um eine Accordion in HTML zu erstellen, folge einfach dieser Schritt-für-Schritt-Anleitung:

Kompletter Beispiel Code

HTML
<html>
<head>
<style>
  .accordion {
    cursor: pointer;
    background-color: #eee;
    color: #444;
    padding: 18px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
  }

  .accordion:hover {
    background-color: #ccc;
  }

  .accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }

  .active:after {
    content: "\2212";
  }

  .content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f9f9f9;
  }
</style>
</head>
<body>
<div class="accordion">
  <h3>Accordion Header</h3>
  <div class="content" style="display: none;">
    Accordion Inhalt
  </div>
</div>

<script>
  const accordions = document.getElementsByClassName('accordion');
  for (let i = 0; i < accordions.length; i++) {
    accordions[i].addEventListener('click', function() {
      this.classList.toggle('active');
      const content = this.nextElementSibling;
      if (content.style.display === 'block') {
        content.style.display = 'none';
      } else {
        content.style.display = 'block';
      }
    });
  }
</script>
</body>
</html>

Schritt 1: Erstelle die Grundstruktur des Accordion. Füge einen Container hinzu, der die gesamte Accordion-Funktion umfasst. Verwende dafür eine

HTML
<div class="accordion"></div>

Schritt 2: Füge den Header des Accordion-Elements hinzu. Vervollständige die Struktur des Accordion, indem du eine Überschrift innerhalb des Containers einfügst, die als Klickbereich dient, um den Inhalt ein- und auszuklappen:

HTML
<div class="accordion">
  <h3>Accordion Header</h3>
</div>

Schritt 3: Füge den Inhalt des Accordion-Elements hinzu. Füge einen Bereich hinzu, der den Inhalt darstellt, der ein- und ausgeklappt werden soll. Verstecke diesen Bereich zunächst, indem du die CSS-Eigenschaft „display: none;“ verwendest:

HTML
<div class="accordion">
  <h3>Accordion Header</h3>
  <div class="content" style="display: none;">
  Accordion Inhalt
  </div>
</div>

Schritt 4: Implementiere den JavaScript-Code, um das Accordion zu steuern. Füge den folgenden Code vor dem schließenden -Tag hinzu:

Java
<script>
  const accordions = document.getElementsByClassName('accordion');
  for (let i = 0; i < accordions.length; i++) {
    accordions[i].addEventListener('click', function() {
      this.classList.toggle('active');
      const content = this.nextElementSibling;
      if (content.style.display === 'block') {
        content.style.display = 'none';
      } else {
        content.style.display = 'block';
      }
    });
  }
</script>

Schritt 5: Füge die CSS-Stile hinzu, um das Accordion zu gestalten. Füge die folgenden Stile in den -Bereich deines HTML-Dokuments ein oder füge sie in eine externe CSS-Datei ein:

CSS
<style>
  .accordion {
    cursor: pointer;
    background-color: #eee;
    color: #444;
    padding: 18px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
  }

  .accordion:hover {
    background-color: #ccc;
  }

  .accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }

  .active:after {
    content: "\2212";
  }

  .content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f9f9f9;
  }
</style>