折りたたみ

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

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) {
  var y = x.nextSibling;
  while (y.nodeType != 1)
    y = y.nextSibling;
  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>

クリックされやすいように,どこにも飛ばないリンク <a href="javascript:void(0)">...</a> を設定しておくこともあります。