twitter ■お問い合わせ当サイトへのリンクサイト仕様

現在位置 > LostTechnology > JavaScript > Expand

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>

ID名は自由ですが、スクリプトの実行時に必ず指定したID名を使用してください。上の例ではリスト要素を利用していますが、別にどの要素であっても表示状態を変更することは可能です。DIV要素に使えば、メニューをクリックするとまったく別の場所にサブメニューが表示される(ポップアップする)というような使い方もできるでしょう。

<SCRIPT type="text/javascript" src="script/expand.js"></SCRIPT>

ここからスクリプトをファイルに保存して、<HEAD>~</HEAD>内に上記のように記述してスクリプトを読み込ませます。そして各要素に記述するonclick属性で実行します。