CSSのみでアコーディオンを実装するサンプルです。 チェックボックスを利用するもので、最小コードをメモ。 ◆html

<label for="list1">ボタン1</label>
<input type="checkbox" id="list1" class="check" />
<ul class="contents">
    <li>リンク1</li>
    <li>リンク2</li>
</ul>

<label for="list2">ボタン2</label>
<input type="checkbox" id="list2" class="check" />
<ul class="contents">
    <li>リンク3</li>
    <li>リンク4</li>
</ul>

◆CSS

input[type="checkbox"].check {
    display: none;
}
input[type="checkbox"].check + .contents {
    height: 0;
    overflow: hidden;
}

input[type="checkbox"].check:checked + .contents {
  height: auto;
}