折りたたみ

例

光学ディスクには次のものがあります。クリックすると説明が現れます。

CD

容量は540M〜700Mで，書き換えできないCD-Rと，書き換え可能なCD-RWがあります。

DVD

容量は1層で470Gで，書き換えできないDVD-R，DVD+Rと，書き換え可能なDVD-RW，DVD-RAM，DVD+RWがあります。

BD

Blu-ray Discの略です。容量は1層で25Gです。

ソース

まず head の中あたりで次のような関数を定義しておきます。

<script>
function fold(x) {
  const y = x.nextElementSibling;
  if (y.style.display == 'none') {
    y.style.display = '';
  } else {
    y.style.display = 'none';
  }
}
</script>

これを使って折りたたみできるリストを作ります。

<dl>
  <dt onclick="fold(this)">CD</dt>
  <dd style="display:none">容量は540M〜700Mで，書き換えできないCD-Rと，書き換え可能なCD-RWがあります。</dd>
  <dt onclick="fold(this)">DVD</dt>
  <dd style="display:none">容量は1層で470Gで，書き換えできないDVD-R，DVD+Rと，書き換え可能なDVD-RW，DVD-RAM，DVD+RWがあります。</dd>
  <dt onclick="fold(this)">BD</dt>
  <dd style="display:none">Blu-ray Discの略です。容量は1層で25Gです。</dd>
</dl>

なお，今では次のようにHTMLだけでも同じ機能が実現できます：

<details>
  <summary>CD</summary>
  容量は540M〜700Mで，書き換えできないCD-Rと，書き換え可能なCD-RWがあります。
</details>

<details>
  <summary>DVD</summary>
  容量は1層で470Gで，書き換えできないDVD-R，DVD+Rと，書き換え可能なDVD-RW，DVD-RAM，DVD+RWがあります。
</details>

<details>
  <summary>BD</summary>
  Blu-ray Discの略です。容量は1層で25Gです。
</details>