De forma estándar, el contenedor es un div, el título es h3 y el contenido es un div con p anidados.

Código

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.

Navegación - lista desordenada con anclas y listas anidadas

Estado guardado basado en la ubicación: el elemento activo se selecciona basándose en location.hash: haz clic en uno de los enlaces para recargar la página.

Código

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

Con opciones, el contenedor es una lista de definición, el título es dt, el contenido es dd.

Código

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.

Estructura Divitus, contenedor div, título div (class="title"), contenido div, sin paneles abiertos en el estado inicial, los paneles se pueden cerrar por completo.

Código

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

Asistente de acordeón

Código

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))
	});
});

Título 1

Contenido 1

Título 2

Contenido 2

Título 3

Contenido 3

Se activa mediante el selector, por ejemplo ':first' o ':eq(1)':

Registro

Demostración del plugin jQuery AccordionEjemplo

Código

Código

Código

Código

Código