on:2010年9月15日sponsorsテキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。Accordionの主な特長IE6を含め、クロスブラウザ対応。スムースなアニメーションを伴ったアコーディオンを簡単に実装可能。自動スライド、手動スライドの切り替えが可能。任意のスライドを指定可能。画像を使用しないで設置可能。カスタマイズが容易(高さ・幅・ボーダー・背景画像など)アクセシブルで、SEOにもフレンドリー。さまざまな種類のコンテンツ(テキスト・画像・リスト・div要素など)をスライド可能。Accordionの実装HTMLアコーディオンの各パネルはdl要素で実装します。「your-accordion-container」は任意の名前で、下記のJavaScriptと同じものを使用します。&lt;/div&gt;12345678910&lt;div&nbsp;id=&quot;your-accordion-container&quot;&gt;&nbsp;&nbsp;&nbsp;&lt;dl&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;タイトル1&lt;/dt&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;テキストや画像、div要素など&lt;/dd&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;タイトル2&lt;/dt&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;テキストや画像、div要素など&lt;/dd&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;タイトル3&lt;/dt&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;テキストや画像、div要素など&lt;/dd&gt;&nbsp;&nbsp;&nbsp;&lt;/dl&gt;&lt;/div&gt;JavaScriptjquery.jsと当スクリプトを外部ファイルとして指定し、下記のように記述します。$('#your-accordion-container').easyAccordion();1$('#your-accordion-container').easyAccordion();スクリプトのオプションでは、スライドの自動・手動、スライドのタイミングを調整できます。下記の例は、5秒ごとに自動スライドするアコーディオンです。5000});CSSアコーディオンのサイズやデザインは、スタイルシートで自由に指定できます。スタイルシートに自信がない人はダウンロードしたファイル「index.html」内のCSSをそのまま使用するのがよいと思います。最初に表示したいパネルを指定する際は、dt要素に「class="active"」を加えます。Posts関連記事が見つかりませんでした。