Стандартный вариант: контейнер — 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
});

Теннис

Один мяч, два игрока. Много веселья.

Футбол

Один мяч, 22 игрока. Много веселья. Перейти на google?

Бейсбол

Один мяч, парни бегают, некоторые бьют других палкой.
Звучит весело, не так ли?

Кроме части с бегом. Пример навигации

Мастер 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

Код