jQuery 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.

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.

导航 - 带有锚和嵌套列表的无序列表

基于位置的保存状态：激活的元素是基于 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)':
日志