jQuery竖向折叠手风琴插件accordion Plugin 演示页面

官方网址:http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
Standard, container is a div, header is h3 and content div and nested p

Code

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.

Navigation - Unordered List with anchors and nested lists.

Location-based state-saving: The active element is choosen based on location.hash: Click one of the links, then reload the page to see it in action.

Code

jQuery('#navigation').accordion({
	active: false,
	header: '.head',
	navigation: true,
	event: 'mouseover',
	fillSpace: true,
	animated: 'easeslide'
});
With options, container is a definition list, header dt, content dd

Code

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 structure, div container, div header (class title), div content, no active on startup and can be completely closed

Code

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 wizard

Code

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))
	});
});
Header 1
Content 1
Header 2
Content 2
Header 3
Content 3
Activate via selector, eg. ':first' or ':eq(1)':
Log
本代码由懒人建站网 收集整理 我要学电脑.COM →51xuediannao.com
懒人建站 http://www.51xuediannao.com

我们为您提供- HTML+CSS模板JS代码网页特效导航菜单焦点幻灯片网页欣赏CSS技巧
懒人建站只收录实用和能提高用户体验的代码
我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。