LU04b – FAQ Accordion

<div class="accordion">
 
  <div class="accordion-item">
    <button class="accordion-btn" aria-expanded="false">
      Frage 1
    </button>
    <div class="panel">
      Antwort 1...
    </div>
  </div>
 
  <div class="accordion-item">
    <button class="accordion-btn" aria-expanded="false">
      Frage 2
    </button>
    <div class="panel">
      Antwort 2...
    </div>
  </div>
 
  <div class="accordion-item">
    <button class="accordion-btn" aria-expanded="false">
      Frage 3
    </button>
    <div class="panel">
      Antwort 3...
    </div>
  </div>
 
</div>

.accordion {
  border: 1px solid #dde4f0;
  border-radius: 8px;
  overflow: hidden;
}
 
.accordion-item {
  border-bottom: 1px solid #dde4f0;
}
 
.accordion-item:last-child {
  border-bottom: none;
}
 
.accordion-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  font-size: 1rem;    /* rem, nicht px! */
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
 
.accordion-btn:hover {
  background-color: #f5f8ff;
}
 
.accordion-btn:focus-visible {
  outline: 3px solid #263fa9;
  outline-offset: -3px;
}
 
/* Panel: standardmässig versteckt */
.panel {
  display: none;
  padding: 0 1.25rem 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
}
 
/* Panel: sichtbar wenn Klasse 'open' gesetzt */
.panel.open {
  display: block;
}

const buttons = document.querySelectorAll('.accordion-btn');
 
buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    const panel = btn.nextElementSibling;
    const istOffen = panel.classList.contains('open');
 
    // Alle Panels schliessen
    buttons.forEach(andererBtn => {
      andererBtn.nextElementSibling.classList.remove('open');
      andererBtn.setAttribute('aria-expanded', 'false');
    });
 
    // Dieses Panel öffnen (nur wenn es vorher zu war)
    if (!istOffen) {
      panel.classList.add('open');
      btn.setAttribute('aria-expanded', 'true');
    }
  });
});