​​タブによるアコーディオンの作成

アコーディオン効果はタブと多くの点で似ています。唯一の違いは、ペインを表示したり、非表示にする方法です。 タブ・ツールには、アコーディオンを作成するための slide と呼ばれる組込み効果を含んでいます。 次に例を示します:

1番目のペイン

Lorem ipsum dolor

Fusce semper, nisi nec pellentesque sollicitudin.

Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra ornare. Nulla id massa nec erat laoreet elementum. Vivamus tristique auctor odio. Integer mi neque.

2番目のペイン

Vestibulum ante ipsum

Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat. Praesent pretium tristique est. Maecenas nunc lorem, blandit nec, accumsan nec, facilisis quis, pede. Aliquam erat volutpat. Donec sit amet urna quis nisi elementum fermentum.

3番目のペイン

Curabitur vel dolor

Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna, non vulputate libero justo nec sem. Nullam arcu. Donec pellentesque vestibulum urna. In mauris odio, fringilla commodo, commodo ac, dignissim ac, augue.

jquery.tabs は、約 2KB の単一のファイルで、タブとアコーディオンの両方を プロフェッショナルな方法で作成できることに気がつくことが重要です。

HTML コード

このHTMLレイアウトは、タブと少し違います。 アコーディオンヘッダは、ペインの前に配置され、すべては id が "accordion" である単一ルート DIV 要素の内側にフラットなリストとして含まれています。 最初のタブの display:block プロパティを設定することで、HTMLに最初のタブを「手動」で表示するようにします。 ページのロード時に、スライド効果を実行したくないので、タブが自動的にこれを行わせないようにします。

<div id="accordion">

	<h2 class="current">First pane</h2>
	<div class="pane" style="display:block">... pane content ...</div>

	<h2>Second pane</h2>
	<div class="pane">... pane content ...</div>

	<h2>Third pane</h2>
	<div class="pane">... pane content ...</div>

</div>

スタイルは、単一のCSSファイル: tabs-accordion.css に定義されています。

JavaScript コード

今回は、タブに対するルート要素がありません。したがって、どの要素をタブとして使うかをツールに明示的に指示しなければなりません。 これは、tabs 設定オプションの中で指定します。アコーディオンに適したスライディング効果は、effect 属性 に付属しています。ページのロード時に、最初のタブが自動的に開かないように initialIndex プロパティを設定解除します。

$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});