jQuery APIリファレンスjQuery UI：Widgets
折りたたみパネル
2009/2/27
ui.core.js、ui.accordion.js
accordion([options]) 戻り値：jQuery
選択された要素をアコーディオンウィジェットにします。
アコーディオンコンテナのマークアップには、別の要素によってグループ化されたヘッダとコンテンツパネルが必要です。 デフォルトヘッダー要素はアンカーであり、以下の構造を仮定します。
<div id="accordion">
<div>
<a href="#">First header</a>
<div>First content</div>
</div>
<div>
<a href="#">Second header</a>
<div>Second content</div>
</div>
</div>
ヘッダー要素には、適切なセレクターとヘッダオプションを指定してください。 コンテンツ要素は、そのヘッダの次に記述します。
もしアコーディオンコンテンツ内のリンクに、ヘッダーとしてa要素をしようする場合は、それらにクラスを追加し、ヘッダとしてそれを使用してください（例：a.header）。
プログラムに基づいてアクティブなコンテンツを変更するためにactivate(数値)を使用します。
"accordionchange"イベントは、毎回アコーディオンの変更が実行されます。 アコーディオンはアニメーションされ、イベントは、アニメーションが完了した時に実行されます。 そうでなければ、それはすぐに実行されます。
$(".ui-accordion").bind("accordionchange", function(event, ui) {
ui.options // options used to intialize this widget
ui.newHeader // jQuery, activated header
ui.oldHeader // jQuery, previous header
ui.newContent // jQuery, activated content
ui.oldContent // jQuery, previous content
});
アコーディオンは、1度に1つののパネルしか開くことができません。
同時に複数のパネルを開きたい場合は、他の方法で実装してください。
$(".accordion h3").click(function(){ $(this).next().toggle("slow")}).next().hide();
Accordionの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery UI：ウィジェット：Accordionの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ui/ui.accordion.js"></script>
<script type="text/javascript">
$(function(){
$("#accordion").accordion({
header: "h3"
});
$(".accordion h3").click(function(){
$(this).next().toggle("slow")
}).next().hide();
});
</script>
<style type="text/css">
.sample { margin:0; padding:0; border:1px solid #ccc; background-color:#fff; width:500px; }
h3 { margin:0; padding:2px 5px; background-color:#ccc; color:#fff; border-bottom:1px solid #fff; }
#accordion div div { margin:0 10px; overflow:auto;}
</style>
</head>
<body>
<div id="wrap">
<h1>jQuery UI：ウィジェット：Accordionの使用例 | jQuery</h1>
<!-- CODE -->
<p>▼基本的なアコーディオン</p>
<div class="sample">
<div id="accordion">
<div>
<h3><a href="#">パネル 1</a></h3>
<div>
<p>あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</p>
<ul>
<li>あいうえおかきくけこさしすせそ</li>
<li>あいうえおかきくけこさしすせそ</li>
<li>あいうえおかきくけこさしすせそ</li>
</ul>
</div>
</div>
<div>
<h3><a href="#">パネル 2</a></h3>
<div>
<p>あいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</p>
<p>あいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</p>
</div>
</div>
<div>
<h3><a href="#">パネル 3</a></h3>
<div>
<p>あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</p>
<ol>
<li>あいうえおかきくけこさしすせそ</li>
<li>あいうえおかきくけこさしすせそ</li>
<li>あいうえおかきくけこさしすせそ</li>
</ol>
</div>
</div>
<div>
<h3><a href="#">パネル 4</a></h3>
<div>
<p>あいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</p>
<p>あいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</p>
</div>
</div>
</div>
</div>
<p>▼同時に複数のパネルを開ける用意したい場合は、アコーディオン以外の方法で実装します。</p>
<div class="sample">
<div class="accordion">
<div>
<h3><a href="#">パネル 1</a></h3>
<div>
<p>あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</p>
<ul>
<li>あいうえおかきくけこさしすせそ</li>
<li>あいうえおかきくけこさしすせそ</li>
<li>あいうえおかきくけこさしすせそ</li>
</ul>
</div>
</div>
<div>
<h3><a href="#">パネル 2</a></h3>
<div>
<p>あいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</p>
<p>あいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</p>
</div>
</div>
<div>
<h3><a href="#">パネル 3</a></h3>
<div>
<p>あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</p>
<ol>
<li>あいうえおかきくけこさしすせそ</li>
<li>あいうえおかきくけこさしすせそ</li>
<li>あいうえおかきくけこさしすせそ</li>
</ol>
</div>
</div>
<div>
<h3><a href="#">パネル 4</a></h3>
<div>
<p>あいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</p>
<p>あいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</p>
</div>
</div>
</div>
</div>
<!-- CODE / -->
</div>
</body>
</html>