タブを使用した水平のアコーディオン

タブで水平方向のアコーディオンを簡単に作成できます。単に、組込みの horizontal 効果を使用し、 CSS の調整を少し行うだけです:

1番目のペイン

Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.

2番目のペイン

Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat.

3番目のペイン

Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.

もちろん、CSSにより大きく異なった外観とサイズにすることができます。マウスオーバ時にペインが現れるように、 イベントの構成プロパティへ mouseover を設定することができます。

HTML コード

HTMLの設定は、"headers" が画像であることを除いて、基本的なアコーディオンのセットアップに同じです:

<!-- accordion root -->
<div id="accordion">

	<!-- 1st header and pane -->
	<img src="/img/title/streaminge.png" />
	<div style="width:200px; display:block"> .. pane content .. </div>

	<!-- 2nd header and pane -->
	<img src="/img/title/flash.png" />
	<div> .. pane content ..</div>

	<!-- 3rd header and pane -->
	<img src="/img/title/streaming.png" />
	<div> .. pane content ..</div>

</div>

スタイルには、CSSファイル: tabs-accordion-horizontal.css を使用しています。 最初に開かれたペインには、width と the display のインラインスタイル宣言がなければならないことに注意してください。 width は、開かれたときのペインの幅を指定します。display は、最初に表示されるように block へ設定する必要があります。

JavaScript コード

tabs 設定オプションは、どの要素が "accordion headers" として使用されるかを定義します。 ここでは、水平アコーディオンに適する "horizontal" という組込みのスライド効果を使用します:

$("#accordion").tabs("#accordion div", {
	tabs: 'img', 
	effect: 'horizontal'
});