CSS3でアコーディオン・トグル

/*動作の基本となるcss*/

.toggleable__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .8s cubic-bezier(0,1,0,1)
}

.toggleable__control:checked ~ .toggleable__content {
  transition-timing-function: ease-in-out;
  max-height: 200px;
}

.hidden--visually {
    border: 0;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

<!--基本のHTML-->

<div class="toggleable">
  <input class="toggleable__control hidden--visually" id="toggleable1" type="checkbox" />
  <label class="toggleable__label"  for="toggleable1">
    ラベル1
  </label>
  <div class="toggleable__content">ラベル1の内容をここに記述します。</div>
</div>

<section>

  <style>

    .toggleable__content {
      max-height: 0;
      overflow: hidden;
      transition: max-height .8s cubic-bezier(0,1,0,1)
    }

    .toggleable__control:checked ~ .toggleable__content {
      transition-timing-function: ease-in-out;
      max-height: 200px;
    }

    .hidden--visually {
        border: 0;
        clip: rect(1px 1px 1px 1px);
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    /* 修飾用 CSS */

    .toggleable {
      border-bottom: 2px solid #bdbdbd;
    }

    .toggleable__label {
      display: block;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem 0;
      cursor: pointer;
      font-weight: bold;
    }

    .toggleable__content {
      margin-top: 1rem;
      padding: 0 2rem;
    }

    .toggleable__control:checked ~ .toggleable__content {
      margin-bottom: 1rem;
    }

      
    .toggleable__label::after {
      content: "▼";
        font-size: 0.8rem;
    }

    .toggleable__control:checked ~ .toggleable__label::after {
      content: "▲";
    }

  </style>

  <div class="toggleable">
    <input class="toggleable__control hidden--visually" id="toggleable1" type="checkbox" />
    <label class="toggleable__label"  for="toggleable1">
      ラベル1
    </label>
    <div class="toggleable__content">ラベル1の内容をここに記述します。</div>
  </div>

  <div class="toggleable">
    <input class="toggleable__control hidden--visually" id="toggleable2" type="checkbox" name="t2" />
    <label class="toggleable__label"  for="toggleable2">
      ラベル2
    </label>
    <div class="toggleable__content">ラベル2の内容をここに記述します。</div>
  </div>

  <div class="toggleable">
    <input class="toggleable__control hidden--visually" id="toggleable3" type="checkbox" />
    <label class="toggleable__label"  for="toggleable3">
      ラベル3
    </label>
    <div class="toggleable__content">ラベル3の内容をここに記述します。</div>
  </div>

</section>