jsを使わないアコーディオン

cssだけでアコーディオンに挑戦しました。
仕様上高さをあらかじめ指定しないといけないようになっているのでjsで高さを補完した方が良いと思います。

See the Pen 190928_cssだけで作るアコーディオン by nekuta (@nekuta) on CodePen.

checkboxとlabelを使って閉じる時と開く時を判別しています。inputとlabelを離すときは、inputのidとlabelのforに同じ名前を入れるとlabelをクリックした時に連動してcheckboxもチェックされます。

HTML

<div class="demo">
  <ul class="list">
    <li> <input type="checkbox" id="demo1"> <label for="demo1" class="list_ttl"> タイトル <span>▼</span> </label>
      <div class="list_content">
        <div class="list_content_inner"> テキストテキストテキスト<br> テキストテキストテキストテキスト<br> テキストテキストテキストテキスト </div>
      </div>
    </li>
    <li> <input type="checkbox" id="demo2"> <label for="demo2" class="list_ttl"> タイトル <span>▼</span> </label>
      <div class="list_content">
        <div class="list_content_inner"> テキストテキストテキスト<br> テキストテキストテキストテキスト<br> テキストテキストテキストテキスト<br> テキスト </div>
      </div>
    </li>
    <li> <input type="checkbox" id="demo3"> <label for="demo3" class="list_ttl"> タイトル <span>▼</span> </label>
      <div class="list_content">
        <div class="list_content_inner"> テキストテキストテキスト<br> テキストテキストテキストテキスト<br> テキストテキストテキストテキスト<br> テキスト </div>
      </div>
    </li>
  </ul>
</div>

SCSS

  input[type="checkbox"] {
    display: none;

    &:checked {
      ~.list_content {
        max-height: 300px;
        opacity: 1;
        visibility: visible;
      }

      +.list_ttl {
        span {
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
        }
      }
    }
  }

  .list_content {
    max-height: 0;
    background: #f5f5f5;
    opacity: 0;
    visibility: hidden;
    overflow: auto;
    -webkit-transition: .3s;
    transition: .3s;
  }

  .list_content_inner {
    padding: 10px;
    box-sizing: border-box;
  }

  .list_ttl {
    position: relative;
    display: block;
    padding: 10px;
    background: #ddd;
    box-sizing: border-box;

    span {
      display: inline-block;
      position: absolute;
      top: 10px;
      right: 10px;
      margin-left: 5px;
      color: #fff;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .3s;
      transition: .3s;
    }
  }

  .list {
    margin: 0;
    padding: 0;
    list-style-type: none;

    li {
      margin-top: 2px;

      &:first-child {
        margin-top: 0;
      }
    }
  }