折りたたみ

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

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>
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です。