アコーディオンパネルやタブパネルを簡単に作成！Simple Javascript Accordions

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

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

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

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

見出し1
コンテンツ1
見出し2
コンテンツ2
見出し3
コンテンツ3

Javascript　初期設定

まずはスクリプトの読み込みを行います。


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

次に初期設定を行います。


<body onload="new Accordian('container of your accordion',speed,'highlighted accordion class name');">

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


<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’)

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

HTML

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


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

最低限の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 は最初にオープンしておきたいコンテンツの見出しにつけると良いでしょう。


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

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

見出し1

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

本家サイト


先月アクセスが多かったページ