折りたたみ

例

光学ディスクには次のものがあります。

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 type="text/javascript">
function fold(x) {
  var y = document.getElementById(x);
  if (y.style.display == 'none')
    y.style.display = '';
  else
    y.style.display = 'none';
}
</script>

これを使って折りたたみできるリストを作ります。javascript:void(0) は # だけでもかまいません。

<dl>
  <dt><a href="javascript:void(0)" onclick="fold('CD'); return false;">CD</a></dt>
  <dd id="CD" style="display:none">容量は540M〜700Mで，……</dd>
  <dt><a href="javascript:void(0)" onclick="fold('DVD'); return false;">DVD</a></dt>
  <dd id="DVD" style="display:none">容量は1層で470Gで，……</dd>
  <dt><a href="javascript:void(0)" onclick="fold('BD'); return false;">BD</a></dt>
  <dd id="BD" style="display:none">Blu-ray Discの略です。……</dd>
</dl>

問題

これではJavaScriptを止めている場合に説明が表示されません。ではどうすればいいでしょうか。

奥村晴彦

Last modified: 2012-04-18 09:23:01