<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;
}
class Accordions extends React.Component {
  componentDidMount() {
    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');
        });
      }
    }
  }
  
  render() {
    return null;
  }
}

ReactDOM.render(
  <Accordions/>,
  document.createElement('div') // detached container
)
View Compiled
Rerun