HOME > >

Simple Javascript Accordions

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

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

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

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

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

使い方

HTML

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

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

JAVASCRIPT

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

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

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

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

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

JAVASCRIPT

  1.  
  2. new Accordian('typeBasic',5,'header_highlight');
  3.  

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

HTML

  1. <div id="typeBasic">
  2.     <div id="c1-header" class="accordion_headings header_highlight">見出し1</div>
  3.     <div id="c1-content">コンテンツ1</div>
  4.  
  5.     <div id="c2-header" class="accordion_headings">見出し2</div>
  6.     <div id="c2-content">コンテンツ2</div>
  7.  
  8.     <div id="c3-header" class="accordion_headings">見出し3</div>
  9.     <div id="c3-content">コンテンツ3</div>
  10. </div>

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

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

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

HTML

  1.  
  2. <div id="c1-content">
  3.     <div class="accordion_child">
  4.         コンテンツ1
  5.     </div>
  6. </div>
  7.  

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

見出し1

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

本家サイト