HOME > ライブラリ > Simple Javascript Accordions

Simple Javascript Accordions

アコーディオンパネルやタブパネルが簡単に♪

下記のような動作が実現できます。HTMLとCSSを変更すればタブ形式や横ナビゲーションにも利用できます。

特徴としては他のライブラリに依存せず単体で動作し、本体も軽量です。またクロスブラウザ仕様となってます。(確認したのはWIN:IE7/IE6/Fx2.0.0.8/NS7.1)

使いやすいと評判のspryのやつより個人的には簡単で使いやすい気がします。

見出し1

コンテンツ1

見出し2

コンテンツ2

見出し3

コンテンツ3

使い方

HTML

<html>
<head>
<script type="text/javascript" src="accordian.pack.js"></script>
</head>
<body onload="new Accordian('container of your accordion',speed,'highlighted accordion class name');">
</body>
</html>

と本家にはこんな感じで書いてありますがbodyタグに書くのが嫌な場合

JAVASCRIPT

<script language="javascript" type="text/javascript">
window.onload = function(){
new Accordian('container of your accordion',speed,'highlighted accordion class name');
}
</script>

と書いても問題ないでしょう。各設定は下記のようになります。

new Accordian('アコーディオン化するエリアのid@string’,オープンするスピード@int,’ハイライト表示するclass名@string’)

ちなみにスピードは数値が大きくなればなるほどスピードが遅ります。

下記のように設定した場合

JAVASCRIPT

new Accordian('typeBasic',5,'header_highlight');

最低限のHTMLは下記のようになります。

HTML

<div id="typeBasic">
<div id="c1-header" class="accordion_headings header_highlight">見出し1</div>
<div id="c1-content">コンテンツ1</div>
<div id="c2-header" class="accordion_headings">見出し2</div>
<div id="c2-content">コンテンツ2</div>
<div id="c3-header" class="accordion_headings">見出し3</div>
<div id="c3-content">コンテンツ3</div>
</div>

見出しのid、○○-headerと○○-contentで囲んだ部分が対応します。○○をキーとしてつなげているって感じなので○○は同じものを設定しましょう。

また○○-contentにCSSを設定すると動作に影響が出るので、余白やマージン設定にはdivを追加したほうが良いでしょう。

header_highlight は最初にオープンしておきたいコンテンツの見出しにつけると良いでしょう。

HTML

<div id="c1-content">
<div class="accordion_child">
コンテンツ1
</div>
</div>

問題点は見出しもdivでマークアップしなくちゃならないとこでしょうか。

見出し1

ちょっと冗長な気がしますね。

本家サイト

Simple Javascript Accordions