JSFiddle - React, Tailwind, and code Playground

by ppgab

HTML

<div class="accordions">
  <div class="accordion">
    <input type="radio" name="accordions" id="radio1">
    <div class="header">
      <label for="radio1">Accordion 1</label>
    </div>
    <div class="content">
      There's content here
      <br>
      There's content here
      <br>
      There's content here
      <br>
      There's content here
      <br>
      There's content here
      <br>
      There's content here
    </div>
  </div>
  <div class="accordion">
    <input type="radio" name="accordions" id="radio2">
    <div class="header">
      <label for="radio2">Accordion 2</label>
    </div>
    <div class="content">
      There's content here
      <br>
      There's content here
      <br>
      There's content here
      <br>
      There's content here
      <br>
      There's content here
    </div>
  </div>
  <div class="accordion">
    <input type="radio" name="accordions" id="radio3">
    <div class="header">
      <label for="radio3">Accordion 3</label>
    </div>
    <div class="content">
      There's content here
      <br>
      There's content here
      <br>
      There's content here
      <br>
      There's content here
      <br>
      There's content here
    </div>
  </div>
</div>

CSS

.accordions {
  display: flex;
  flex-direction: column;
}

.accordion {
  width: 100%;
}

.accordion .header{
  background: darkgrey;
  color: white;
}

.accordion input[type="radio"] {
  display: none;
}

.accordion input[type="radio"]:checked ~ .content {
  max-height: 100%;
  overflow: auto;
}

.accordion .header label{
  width: 100%;
  height: 100%;
  display: inline-block;
}

.accordion .content{
  width: 100%;
  max-height: 0;
  overflow: hidden;
}