【テクニック】QiitaやGithubなどで簡単なアコーディオンを作る

デモ

タイトル

本文
マークダウンも使える

ソースコード

<details>
  <summary>
    タイトル
  </summary>
  <div>

  本文<br>
  **マークダウン**も使える

  </div>
</details>

注意

• インデントがおかしい
  • 見えやすいようにしたかったが、半角スペースが2つ以上だとGithub側で改行扱いされてしまうため中途半端に採用
• divタグの改行を詰めるとマークダウンが適用されなくなる。

上記問題があるため、実践では

<details><summary>タイトル</summary><div>

本文<br>
**マークダウン**も使える

</div></details>

とするのも一考の余地がある。

応用

***で水平線になるので、どこからどこまでがアコーディオンで表示・非表示できるか明示的にすると読みやすくなる。

タイトル

---

本文
マークダウンも使える

---

非推奨

一応、アコーディオンをネストさせる方法はある。

展開する

タイトル1

---

本文
マークダウンも使える

---

タイトル2

---

本文
マークダウンも使える

---

ソースコード

展開する

<details><summary>展開する</summary><div>
  <details><summary>タイトル1</summary><div>

  ***
  本文<br>
  **マークダウン**も使える
  ***

  </div></details>
  <details><summary>タイトル2</summary><div>

  ***
  本文<br>
  **マークダウン**も使える
  ***

  </div></details>
</div></details>

解説

半角スペース2つまでならインデントができるので、ネスト部分をインデントして少しでも読みやすいようにした。
とはいえ、ネストが読みやすいか・メンテしやすいかを考えると微妙なのは変わらないためアコーディオンを乱用（ネスト）は非推奨とした。
水平線をいれると余計にメンテナンス性、というか可読性が下がる。
Markdownで書いたものも、一つのプログラムだと考えると、果たして読みやすいと言えるだろうか？

これは読みやすさを意識するあまり読みにくくなった例なので、こういうケースでは小手先の技より文字の構造を見直すべき。