NETTUTS - Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ



次のようなマークアップでシンプルに実装できる模様。

<div id="test-accordion" class="accordion">
   <div class="accordion-toggle">トグル1</div>
   <div class="accordion-content">コンテンツ1</div>
   <div class="accordion-toggle">トグル2</div>
   <div class="accordion-content">コンテンツ2</div>
   <div class="accordion-toggle">トグル3</div>
   <div class="accordion-content">コンテンツ3</div>
   <div class="accordion-toggle">トグル4</div>
   <div class="accordion-content">コンテンツ4</div>
</div>

単なるサンプルでなく、チュートリアルということで、作り方もわかってなかなかいいです。

実際に動くサンプルはこちら : なかなかクールです:)

関連エントリ

• JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」
• CSSだけでアコーディオン風ＵＩを実現するサンプル
• アニメーションする面白いタブＵＩ実装JSライブラリ「Tab Styled Accordion」