Expand
このJavaScriptは2001年3月に発売された著書「わたしにもできる動くホームページ」に収録したものです。Internet Explorer 4の頃に作成したものであるため、そのうちjQuery用にしてもっとシンプルな実装で作成するかもしれません。
要素の表示状態を変更するためのDynamicHTML(DOM+JavaScript)です。スクリプトはscriptフォルダにあるものとして記述しています。
リスト要素(UL/OLなど)で、リストを展開・収納するという使い方が一番簡単でしょう。onmouseover/onmouseoutを使えばTip Helpの表示にも利用可能です。ただ、今となってはスタイルシートをうまく指定してjQueryを利用したアコーディオンを利用したほうがよいかと思われます。
Sample
- ここをクリックしてみてください。
- IDで指定した要素の表示状態が切り替わります。
<UL>
<LI onclick="expand('Sample');">ここをクリックしてみてください。
<UL id="Sample">
<LI>IDで指定した要素の表示状態が切り替わります。
</UL>
</UL>
<LI onclick="expand('Sample');">ここをクリックしてみてください。
<UL id="Sample">
<LI>IDで指定した要素の表示状態が切り替わります。
</UL>
</UL>
ID名は自由ですが、スクリプトの実行時に必ず指定したID名を使用してください。上の例ではリスト要素を利用していますが、別にどの要素であっても表示状態を変更することは可能です。DIV要素に使えば、メニューをクリックするとまったく別の場所にサブメニューが表示される(ポップアップする)というような使い方もできるでしょう。
<SCRIPT type="text/javascript" src="script/expand.js"></SCRIPT>
ここからスクリプトをファイルに保存して、<HEAD>~</HEAD>内に上記のように記述してスクリプトを読み込ませます。そして各要素に記述するonclick属性で実行します。