<h1>Accordion demo</h1>
With pure CSS

<div class="accordion">

  <article>
    <input id="article1" type="radio" name="articles" checked>
    <label for="article1">
      <h2>Title 1</h2>
    </label>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur veritatis fugiat possimus hic doloremque sint reiciendis? Quasi beatae explicabo qui quod atque a iste. Explicabo inventore quo expedita tempore amet!
    </div>
  </article>

  <article>
    <input id="article2" type="radio" name="articles">
    <label for="article2">
      <h2>Title 2</h2>
    </label>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur veritatis fugiat possimus hic doloremque sint reiciendis? Quasi beatae explicabo qui quod atque a iste. Explicabo inventore quo expedita tempore amet!
    </div>
  </article>

  <article>
    <input id="article3" type="radio" name="articles">
    <label for="article3">
      <h2>Title 3</h2>
    </label>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur veritatis fugiat possimus hic doloremque sint reiciendis? Quasi beatae explicabo qui quod atque a iste. Explicabo inventore quo expedita tempore amet!
    </div>
  </article>

  <article>
    <input id="article4" type="radio" name="articles">
    <label for="article4">
      <h2>Title 4</h2>
    </label>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur veritatis fugiat possimus hic doloremque sint reiciendis? Quasi beatae explicabo qui quod atque a iste. Explicabo inventore quo expedita tempore amet!
    </div>
  </article>

</div>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 3em 1em;
}

.accordion {
  max-width: 420px;
  text-align: left;
}

article {
  border: 1px solid #fff;
  padding: 1em;
  margin: 1em auto;
}

input[type="radio"] {
  appearance: none;
  position: fixed;
  top: -100vh; left: -100vh;

  & ~ div {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
  }

  &:checked ~ div {
    max-height: 200px;
  }
}