標準では、コンテナは div で、見出しは h3、内容は div とネストされた p です。

コード

jQuery('#list1a').accordion();
jQuery('#list1b').accordion({
	autoheight: false
});

There is one obvious advantage:

You've seen it coming!
Buy now and get nothing for free!
Well, at least no free beer. Perhaps a bear,
if you can afford it.

Now that you've got...

your bear, you have to admit it!
No, we aren't selling bears.

Rent one bear, ...

get two for three beer.

And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
Period.

There is one obvious advantage:

You've seen it coming!
Buy now and get nothing for free!
Well, at least no free beer. Perhaps a bear,
if you can afford it.

Now that you've got...

your bear, you have to admit it!
No, we aren't selling bears.

Rent one bear, ...

get two for three beer.

ナビゲーション - アンカーとネストされたリストを含む順序なしリスト

位置ベースの保存状態：アクティブな要素は location.hash に基づいて選択されます。いずれかのリンクをクリックすると、ページが再読み込みされます。

コード

jQuery('#navigation').accordion({
	active: false,
	header: '.head',
	navigation: true,
	event: 'mouseover',
	fillSpace: true,
	animated: 'easeslide'
});

オプション付きの場合、コンテナは定義リストであり、タイトルは dt、内容は dd です。

コード

jQuery('#list2').accordion({
	event: 'mouseover',
	active: '.selected',
	selectedClass: 'active',
	animated: "bounceslide",
	header: "dt"
}).bind("change.ui-accordion", function(event, ui) {
	jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log');
});

Red: Fancy stuff about red thingies.
Green: Green! Green! Green!
Blue: Cool kids are blue.

Divitus 構造、div コンテナ、div タイトル（class="title"）、div コンテンツ、初期状態では開いているパネルがなく、パネルは完全に閉じることができます。

コード

jQuery('#list3').accordion({
	header: 'div.title',
	active: false,
	alwaysOpen: false,
	animated: false,
	autoheight: false
});

Tennis

One ball, two players. Lots of fun.

Soccer

One ball, 22 players. Lots of fun. Go to google?

Baseball

Well, one ball, some guys running around, some guys hitting others with a stick.
Sounds like fun, doesn't it?

Well, apart from the running part. Navigation example

accordion 向导

コード

var wizard = $("#wizard").accordion({
	header: '.title',
	event: false
});

$("div.title", wizard).each(function(index) {
	$(this)
	.next()
	.children(":button")
	.filter(".next, .previous")
	.click(function() {
		wizard.changeAccordion("activate", index + ($(this).is(".next") ? 1 : -1))
	});
});

标题 1

内容 1

标题 2

内容 2

标题 3

内容 3

通过选择器激活，例如 ':first' 或 ':eq(1)':

日志

jQuery Accordion 插件演示例

コード

コード

コード

コード

コード