HTMLの details summary タグで簡単にアコーディオンを作る方法：JS不要！

<details>
  <summary>アコーディオンメニューとは</summary>
  エクスパンドとも呼ばれるアコーディオンメニューとはクリックやタップで項目を開閉できる折りたたみ式のメニューのことです。表示エリアをコンパクトに保ちながら、必要な情報を簡単に見せることができるため、FAQページやサイドメニューなどでよく使われます。
</details>

details {
  border: 1px solid #333;
  padding: 1em;
}
details summary {
  cursor: pointer;
  list-style-type: "👉";
}
details[open] > summary {
  list-style-type: "👇";
  margin-bottom: 1em;
}

<details open>
  <summary>最初から開いた状態</summary>
  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</details>

<details name="details_group" open>
  <summary>グループ</summary>
  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</details>
<details name="details_group">
  <summary>グループ</summary>
  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</details>
<details name="details_group">
  <summary>グループ</summary>
  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</details>

<details open>
  <summary>アコーディオンメニューを入れ子構造にしてみよう</summary>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <ul>
    <li>リストも入れられる</li>
    <li>リストも入れられる</li>
    <li>リストも入れられる</li>
  </ul>
  <details>
    <summary>入れ子の子🐈</summary>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  </details>
  <details>
    <summary>入れ子の子🐕</summary>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  </details>
</details>

<details>
  <summary>アコーディオンをCSSでアニメーションする💪</summary>
  アコーディオンをCSSでアニメーションしたい場合、summaryタグの直後はインライン要素の必要があります🥺そのため、ブロック要素である div, p, ul などは使用できないので注意が必要です。
  <p>ここから👇️はブロック要素です。直後がインライン要素であれば良いので、説明文はタグをつけずにその下はdivにするなどが可能です。</p>
</details>

details {
  border: 1px solid #333;
  padding: 1em;
}
details summary {
  cursor: pointer;
  list-style-type: "👉";
  transition: ease .2s;
}
details[open] > summary {
  list-style-type: "👇";
  margin-bottom: 1em;
}