CSSリファレンス、(X)HTML、Movable Type
その他Webサイト制作に関する役立つ情報を掲載します！

アコーディオンメニューのダウンロード

Animated JavaScript Accordion V2の Click here to download the source code. って所からファイルを一式ダウンロード出来ます。

アコーディオンメニューの使い方

このスクリプトを自分のサイトで使いたい場合、ダウンロードしてきたファイルの中にあるscript.jsを任意の場所にアップし、それをheadタグ内で読み込んで下さい。
(jsってフォルダにアップした場合はhead内に下記ソースを追加)

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

どのdl要素かを開閉式にするのかをbodyの閉じタグの上に記述

<script type="text/javascript">
var slider1=new accordion.slider("slider1");
slider1.init("dl要素につけるid名");
</script>

例

<dl id="menu">
<dt>タイトル</dt>
<dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd>
<dt>タイトル</dt>
<dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd>
<dt>タイトル</dt>
<dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd>
</dl>

<script type="text/javascript">
var slider1=new accordion.slider("slider1");
slider1.init("menu");
</script>

一つのコンテンツだけ開いた上体にしておく。

<script type="text/javascript">
var slider2=new accordion.slider("slider2");
slider2.init("dl要素につけるid名",何番目を開いておくか記述,"open");
</script>

一番上を開いた上体にする例

<dl id="list">
<dt>タイトル</dt>
<dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd>
<dt>タイトル</dt>
<dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd>
<dt>タイトル</dt>
<dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd>
</dl>

<script type="text/javascript">
var slider2=new accordion.slider("slider2");
slider2.init("list",0,"open");
</script>

真ん中に入れる数字なんですが、一番上を0と、二番目を1って計算して数字を入力して下さい。