UIのAccordionプラグインを組み込みます。ここでは、jQueryのセレクタで<div#accordion>要素を検索してaccordion()メソッドを実行しています。});</script>Webブラウザを起動してサンプルを表示すると、アコーディオンの「見出し#1」のコンテンツが展開された状態で表示されます。「見出し#2」をクリックすると、「見出し#1」を折りたたんで「見出し#2」を展開します。Webブラウザにサンプルを表示したところ(デフォルトで「見出し#1」が展開される)(画像をクリックすると、実際にサンプルが試せます)ccordionプラグインをオプションでカスタマイズ!Accordionの引数に各種オプションを追加することにより、アコーディオンの動作をカスタマイズできます。すべてのコンテンツを折りたたむにはaccordion()メソッドの引数にcollapsibleオプションを追加して、「true」を設定します。});表示時に展開するコンテンツを指定するにはWebブラウザにアコーディオンを表示したときに「見出し#2」を展開させるには、activeオプションを追加してインデックス番号(先頭が0から始まる)「1」を設定します。});見出しをクリックしたときにコンテンツをアニメーション化するにはanimatedオプションに「'bounceslide'」などを設定します。Tool」を組み込むと、ランタイム時にAccordionのテーマをダイナミックに書き換えができます。UIのサイトを参照してください。「jQueryのslideDown/slideUp/fadeIn/fadeOutメソッドの正体」slideDown/slideUpメソッドはheightプロパティを、fadeIn/fadeOutメソッドはopacityプロパティを、書き換えることにより実装します。jQueryは、これらのプロパティを書き換えるのに、animateメソッドを使用しています。slideDown/slideUp/fadeIn/fadeOutの正体は、animateだったのです。UIのAccordionプラグインを利用すると、わずか1行のコードを追加するだけでアコーディンを実装できますが、細かいところまで自由にカスタマイズすることはできません。ここでは、jQueryの各種APIを使用して自作のアコーディオンを作成する方法を説明します。ステップ1:イメージを用意するPhotoshopなどのグラフィック・ソフトで、アコーディオンの見出しに表示するイメージを作成します。1.3.2のライブラリを組み込みます。1.3.2のライブラリをCDN経由で取り込む次ページでは引き続き、アコーディオン効果を自作する方法を解説します。そのまま実行できるサンプルもあるので、ぜひお試しください。最後に、本稿で詳細に解説できなかったアコーディオン関連のプラグインも含めて、お勧めのプラグインを4つまとめて紹介します。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。