stackoverflow pure accordion

HTML

<ul>
  <li>
    <div class='box'>
      <h2>Item One</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </li>
  <li>
    <div class='box'>
      <h2>Item Two</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </li>
  <li>
    <div class='box'>
      <h2>Item Three</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </li>
</ul>

CSS

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style-type: none;
}

h2 {
  margin: 0;
  text-align: center;
  font: normal 22px Arial, Verdana;
}

.box {
  width: 200px;
  max-height: 40px;
  padding: 10px 0;
  background: #fdfdfd;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 1px solid black;
  transition: all 0.5s;
}

.open {
  max-height: 300px;
}

Babel + JSX

const boxes = document.getElementsByClassName('box');

for (let elem of boxes) {
	elem.addEventListener('click', (e) => {
  	reset();
  	e.currentTarget.className += " open";
  });
}

function reset() {
	for (let elem of boxes) {
  	if (elem.className === "box open") elem.className = "box";
  }
}