jQuery UI Accordion

标准的，容器是一个 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 插件演示 Demo

代码

代码

代码

代码

代码