Standardmäßig ist der Container ein div, der Titel ein h3, der Inhalt ein div mit verschachtelten 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.

Navigation: eine unsortierte Liste mit Ankern und verschachtelten Listen. Der Zustand wird positionsbasiert gespeichert. Das aktive Element wird anhand von location.hash ausgewählt. Klicken Sie auf einen Link und laden Sie die Seite neu.

Code

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

Mit Optionen ist der Container eine Definitionsliste. Der Titel steht in dt, der Inhalt in 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-Struktur, div-Container, div-Titel (class="title"), div-Inhalt. Im Ausgangszustand ist kein Panel geöffnet. Panels lassen sich vollständig schließen. 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))
	});
});

Titel 1

Inhalt 1

Titel 2

Inhalt 2

Titel 3

Inhalt 3

Aktivierung über Selektor, zum Beispiel ':first' oder ':eq(1)':

Protokoll

jQuery Accordion-Plugin-Demo Beispiel

Code