lima-city: Webhosting, Domains und Cloud
1 Pluspunkt 0 Minuspunkte

Ich habe dieses Accordeon Menü.

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

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

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

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
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.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

Das funktioniert eigentlich auch gut aber wie kann ich machen das immer nur ein Punkt zur selben Zeit offen bleibt?

von  

1 Antwort

0 Pluspunkte 0 Minuspunkte

Du kannst im Listener alle Elemente durchlaufen und schließen außer dem angeklickten.

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {

    // Schließe alle offenen Abschnitte
    for (j = 0; j < acc.length; j++) {
      if (acc[j] !== this) {
        acc[j].classList.remove("active");
        acc[j].nextElementSibling.style.display = "none";
      }
    }

    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

von (720 Punkte)  
Diese Community basiert auf dem Prinzip der Selbstregulierung. Beiträge werden von Nutzern erstellt, bewertet und verbessert – ganz ohne zentrale Moderation.

Wer hilfreiche Fragen stellt oder gute Antworten gibt, sammelt Punkte. Mit steigender Punktzahl erhalten Mitglieder automatisch mehr Rechte, zum Beispiel

  • Kommentare verfassen
  • Fragen und Antworten bewerten
  • Themen von Fragen bearbeiten
  • Fragen, Antworten und Kommentare bearbeiten
  • Inhalte ausblenden

So entsteht eine Plattform, auf der sich Qualität durchsetzt – getragen von einer engagierten Gemeinschaft.

2.3k Fragen

2.8k Antworten

265 Kommentare

14 Nutzer