jQueryのアコーディオン効果の使い方・作り方：CSSの書き方も分かるjQueryプラグイン実践活用法（2）（1/3 ページ）

jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。

» 2010年01月07日 00時00分公開

[葛西秋雄，＠IT]

コンテンツを展開／折りたたみするアコーディオン効果

　連載第1回の「jQuery、プラグイン、jQuery UI、Web経由のCDNとは」では、本連載を読むための基礎知識として、JavaScriptフレームワーク／ライブラリ「jQuery」「jQuery UI」について解説し、jQueryの拡張機能であるプラグインを作成する方法についても説明しました。jQuery、jQuery UIのプラグインを使用するには、jQuery 1.3.2とjQuery UI 1.7.2のライブラリが必要ですが、本連載ではグーグルかマイクロソフトのCDN（Content Delivery Network）を利用して、リモートサイトから直接取り込みます。

　今回からは、jQueryのプラグインを利用してさまざまなUI効果（エフェクト）を得る方法やサンプルを紹介していきます。また、プラグインを使用せずに、jQueryのAPIを使用して自作のエフェクトを作成する方法についても解説します。

　その初めとして本稿では、jQuery UIの「Accordion」プラグインを利用してアコーディオンを表示するサンプルを紹介します。Accordionプラグインを利用すると、コンテンツを展開／折りたたみできるので、少ない画面領域に多くのコンテンツが表示できます。後半には、プラグインを使用しないでjQueryのAPIを使用して自作のアコーディオンを作成する方法も解説します。

jQuery UIのAccordionプラグインを使ってみる

　jQuery UIには、AccordionやTabs、Sliderなどのウィジェットがサポートされていますが、ここでは「Accordion」プラグインを使用して、コンテンツを展開したり折りたたみできるようにします。

jQuery UI - Demos & Documentation via kwout

ステップ1：CSSとライブラリをCDN経由で組み込む

　お好みの開発ツールまたはエディタを起動して、新規ファイルを作成したら、要素に<link>要素と<script>要素を追加して、jQuery UIのテーマとjQuery 1.3.2、jQuery UI 1.7.2のライブラリを組み込みます。

　jQuery UIのテーマは、2009年12月の本稿執筆時点で24種類用意されています。ここでは、「ui-darkness」のテーマを使用します。後ほど、jQuery UIのテーマをランタイム時にダイナミックに書き換える機能も追加します。

<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />……【1】
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>……【2】
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>……【3】
</head>

jQuery UIのテーマ（ui-darkness）をCDN経由で取り込む
jQuery 1.3.2のライブラリをCDN経由で取り込む
jQuery UI 1.7.2のライブラリをCDN経由で取り込む

ステップ2：XHTMLで骨格を定義する

　<body>要素に<div#accordion>要素を追加したら、<h3>要素と<div>要素を入れ子にします。<h3>要素には、<a>要素を追加して見出しを定義し、<div>要素には、<p>要素を追加してテキストを定義します。

<div id="accordion" style=" width: 400px;">
  <h3><a href="#">見出し＃1</a></h3>
  <div>
    <p>
      Lorem ipsum ius an duis discere democritum, sit at suas persius iudicabit. 
……
     </p>
  </div>
</div>