<div class="accordion">
  <div class="accordion__wrapper">
    <h1>Accordion</h1>
    <div class="accordion__item">
      <div class="accordion__question">
        <h2>How do I love thee?</h2>
      </div>
      <div class="accordion__answer">
        <p>
          Let me count the ways. / I love thee to the depth and breadth and height / My soul can reach, when feeling out of sight / For the ends of being and ideal grace. (Elizabeth Barrett Browning)
        </p>
      </div>
    </div>
    <div class="accordion__item">
      <div class="accordion__question">
        <h2>Can you be sick for a home you’ve never seen?</h2>
      </div>
      <div class="accordion__answer">
        <p>
          Sometimes the curtain flutters, / and I catch a glimpse / of a fawn in the shadow / that bids me to follow. / I can’t. Not yet. / But I am coming home. (Jen Rose)
        </p>
      </div>
    </div>
    <div class="accordion__item">
      <div class="accordion__question">
        <h2>Why, who makes much of a miracle?</h2>
      </div>
      <div class="accordion__answer">
        <p>
          As to me I know nothing else but miracles, / Whether I walk the streets of Manhattan, / Or dart my sight over the roofs of houses toward the sky, / Or wade with naked feet along the beach just in the edge of the water... (Walt Whitman)
        </p>
      </div>
    </div>
    <div class="accordion__item">
      <div class="accordion__question">
        <h2>Shall I compare thee to a summer’s day?</h2>
      </div>
      <div class="accordion__answer">
        <p>
          Thou art more lovely and more temperate: / Rough winds do shake the darling buds of May, / And summer’s lease hath all too short a date: / Sometime too hot the eye of heaven shines... (William Shakespeare)
        </p>
      </div>
    </div>
  </div>
</div>

var items = document.getElementsByClassName("accordion__item");

for (i = 0; i < items.length; i++) {
  items[i].addEventListener("click", function() {
    // If the current element is already expanded, collapse it and do nothing else (return)
    if (this.classList.contains("expanded")) {
      this.classList.remove("expanded");
      return;
    }

    // Is there an expanded element?
    let expandedItem = document.getElementsByClassName("expanded")[0] || null;
    // If so, collapse it
    if (expandedItem) {
      expandedItem.classList.remove("expanded");
    }

    // Expand the current element
    this.classList.add("expanded");
  });
}