連載インデックスへ

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

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>

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>

図1　<p>要素のstyle属性にwidth、height、opacityが追加されて「0」になるまで段階的に書き換えられているところ（Firefoxのアドオン「Firebug」で確認）

図1　ページに「見出し#1」とダミーテキストを配置したところ（Firefoxのアドオン「Firebug」で確認）

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

コラム　「Loremu ipsumって何？どう読むの？」

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

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プラグイン実践活用法バックナンバー連載インデックスへ»

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

リッチクライアント & 帳票フォーラム新着記事

画像を美しく魅せる効果を加えるjQueryプラグイン3選 （2010/3/17）
2つ重ねて比較するBefore/After、部分ごとに切り替えるpanelGallery、ズーム/カーテンなどができるcycle
現場の無駄な流血を止めるための「プロトタイプ」とは （2010/3/12）
サイトやWebアプリ/RIAの設計やデザインを効率良く進めるには、プロジェクト関係者の想定を一致させていくことが大事だが…
Flashを閃光のごとく高速化するための基礎知識 （2010/3/9）
Flash高速化のための基礎知識や実践的テクニックを紹介する連載。初回は“処理負荷”を調べる具体的な方法を解説します
Windows 7でどんだけ“おばか”なアプリが作れるの？ （2010/3/4）
おばかの発想の源やアプリの作り方などについて、おばかアプリ選手権の歴戦の受賞者や、マイクロソフトの代表者に話を伺った。アイデアのご参考に

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

RSSフィード

＠IT 新着記事

スキルアップ／キャリアアップ（JOB@IT）

デザインハック

「いつかは壊れるサーバ」そんな故障に
迅速で安価に手軽に対応する方法とは？
New！

「特権ユーザー」の事件を防げ！
万能権限を持つユーザーの管理方法とは？
New！

仮想環境の構築とデータ保護の特効薬？！
実績と信頼性の高いパッケージで安心運用

仮想環境のバックアップもこれまでどおり
「まるごと取ってまるごと戻す」簡単運用

おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！

社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

その数、なんと400台以上！グループ内
サーバの「統合管理」によるメリットは？

美人!? まあまあ？気になるいやし系!!
PV急増で「美人時計」がとった手段とは？

進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か

運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

＠IT Special ヘ

ニュース一覧へ

お勧め求人情報

年収が落ち込んでいるのは自分だけ？
2万5000人から集めたデータをもとに、
現在のあなたの市場価値を判定

本気モードの企業がスカウト
人手不足を補う求人とはまったく違う、
優秀な人材だけが受け取れるスカウトメール

転職だって、縁とタイミングが重要
憧れの企業や職種へのキャリア・アップは、
まず「求人案件」との出会いから

JOB＠IT ヘ

ITトレメ「ビジネス基礎」シリーズ配信開始
「マナー＆コミュニケーション編」「法律・知財・債権管理編」

＊先週の人気講座ランキング＊
～CCNA編～

◆

TomcatやJBossなどAPサーバ環境に関する
情報を集約！ “業務”用APサーバ大百科
New！

◆

クラウド的ユーザー体験の変化は脅威か？
仮想化技術を使いこなす運用管理術を紹介
New！

◆

上司や部下、部署内メンバーとの情報共有
を“ガラッ”と変えるコラボツールとは？
New！

◆

おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！

◆

社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

◆

Twitterのアカウントはなぜ突破された？
メールによる新手の攻撃手法とその対策

◆

もう仮想化のお試しフェイズは終わりだ！
Hyper-V 2.0が基幹システムも仮想化

◆

美人!? まあまあ？気になるいやし系!!
PV急増で「美人時計」がとった手段とは？

◆

クライアント企業から求められる人材
⇒IT技術と経営戦略を併せ持つ「戦略家」

◆

.NET編集長が実践する「技術情報検索術」
サンプル・コードを簡単に探す“技”は？

◆

業務効率と情報セキュリティ対策を両立！
手間なく確実に機密情報を守る方法とは？

◆

進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か

◆

運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

◆

【CTC事例】約30の基幹システムを統合！
膨大なバッジジョブを制御した方法は？

◆

仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する

◆

その数、なんと400台以上！グループ内
サーバの「統合管理」によるメリットは？

＠IT Special ヘ

＠ITトップ｜会議室｜利用規約｜プライバシーポリシー｜サイトマップ

Copyright(c) 2000-2010 ITmedia Inc.
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」「BARKS」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。