光学ディスクには次のものがあります。クリックすると説明が現れます。
まず 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>