<div class="accordion">
  <div class="accordion-panel">
    <h3 class="accordion-header">Panel 1</h3>
    <div class="accordion-body">These are the contents of panel 1</div>
  </div>
  <div class="accordion-panel">
    <h3 class="accordion-header">Panel 2</h3>
    <div class="accordion-body">These are the contents of panel 2</div>
  </div>
  <div class="accordion-panel">
    <h3 class="accordion-header">Panel 3</h3>
    <div class="accordion-body">These are the contents of panel 3</div>
  </div>
</div>
.accordion-header {
  cursor: pointer;
}

.accordion-panel {
  border: 1px dashed black;
  margin: 2px;
  padding: 5px;
}

.accordion-panel > .accordion-body {
  display: none;
}

.accordion-panel.accordion-expanded > .accordion-body {
  display: block;
}
const accordions = document.querySelectorAll(".accordion");
for (const accordion of accordions) {
  const panels = accordion.querySelectorAll(".accordion-panel");
  for (const panel of panels) {
    const head = panel.querySelector(".accordion-header");
    head.addEventListener('click', () => {
      for (const otherPanel of panels) {
        if (otherPanel !== panel) {
          otherPanel.classList.remove('accordion-expanded');
        }
      }
      panel.classList.toggle('accordion-expanded');
    });
  }
}
Rerun