コンテンツ内を開閉してくれるアコーディオンメニュー [JS]

Animated JavaScript Accordion V2

「Animated JavaScript Accordion V2」で配布。紹介されているスクリプトなんですが、容量も少なく、アコーディオンメニュー開閉の動作もスムーズのなので使い方や注意点などを紹介しておきたいと思います。

demo page

…ここからが続き

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

Animated JavaScript Accordion V2Click 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って計算して数字を入力して下さい。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article