CSSの書き方も分かるjQueryプラグイン実践活用法
連載インデックスへ
CSSの書き方も分かるjQueryプラグイン実践活用法（2）

jQueryのアコーディオン効果の使い方・作り方

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

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

- PR -

　連載第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」プラグインを使用して、コンテンツを展開したり折りたたみできるようにします。

http://jqueryui.com/demos/accordion/

jQuery UI - Demos & Documentation via kwout

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

　お好みの開発ツールまたはエディタを起動して、新規ファイルを作成したら、<head>要素に<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>
  1. jQuery UIのテーマ（ui-darkness）をCDN経由で取り込む
  2. jQuery 1.3.2のライブラリをCDN経由で取り込む
  3. 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>

図1　<p>要素のstyle属性にwidth、height、opacityが追加されて「0」になるまで段階的に書き換えられているところ（Firefoxのアドオン「Firebug」で確認）
図1　ページに「見出し#1」とダミーテキストを配置したところ（Firefoxのアドオン「Firebug」で確認）

　ここでは、「Loremu ipsum」（※コラム参照）と呼ばれるダミーテキストを使用しています。同様の手順で4個の見出しを定義します。

コラム　「Loremu ipsumって何？ どう読むの？」
Loremu ipsumは「ロレム・イプサム」と読みます。出版やWebデザインなどの分野でダミーテキストとして利用されています。Loremu ipsumのサイトから、ダミーテキストを自動生成できます。プロトタイプやサンプル、デモなどを作る際に便利です。

http://www.lorem-ipsum.info/generator3

Lorem Ipsum - Generator3 via kwout

　次ページでは引き続き、「Accordion」プラグインの使い方を説明し、オプションを使ったカスタマイズの仕方や、アコーディオン効果を自作する方法も解説します。そのまま実行できるサンプルもあるので、ぜひお試しください。

  1/3

　INDEX
CSSの書き方も分かるjQueryプラグイン実践活用法（2）　
jQueryのアコーディオン効果の使い方・作り方
Page1
コンテンツを展開／折りたたみするアコーディオン効果
jQuery UIのAccordionプラグインを使ってみる
コラム　「Loremu ipsumって何？ どう読むの？」
  Page2
Accordionプラグインをオプションでカスタマイズ！
コラム　「jQueryのslideDown/slideUp/fadeIn/fadeOutメソッドの正体」
4ステップでjQueryのアコーディオン効果を自作
  Page3
オススメのアコーディオン系プラグイン4選

CSSの書き方も分かるjQueryプラグイン実践活用法 バックナンバー 連載インデックスへ»


「デザインハック」コーナーへ


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事
  • コンテンツ政策ヲ転換セヨ！ （2012/2/10）
    mixiにしろTwitterにしろニコ動にしろ、ソーシャルサービスは伸びている。シロウトの個人が作るコンテンツで成り立つサービスだ
  • NFCやLTE対応予定のiPhoneと、先行するAndroid （2012/2/9）
    iPhoneとAndroid、そしてWindows Phoneという3つのOSの今後を占う。それぞれの通信規格とコンセプトは？
  • 家電のUIになるブラウザ （2012/2/3）
    未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか？ 未来のホームネットワークを想像しよう
  • 「汎用のUI技術」として広がるHTML5 （2012/2/2）
    すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH