Standard : le conteneur est un div, le titre est un h3, le contenu est un div et des p imbriqués. Code

jQuery('#list1a').accordion();
jQuery('#list1b').accordion({
	autoheight: false
});

Il y a un avantage évident : Vous l'aviez vu venir !

Achetez maintenant et recevez rien gratuitement !
Eh bien, au moins pas de bière gratuite. Peut-être un ours,
si vous pouvez vous le permettre.

Maintenant que vous avez... votre ours, vous devez l'admettre !

Non, nous ne vendons pas d'ours.

Louez un ours, ... obtenez-en deux pour trois bières.

Et maintenant, quelque chose de complètement différent.
Et maintenant, quelque chose de complètement différent.
Et maintenant, quelque chose de complètement différent.
Et maintenant, quelque chose de complètement différent.
Et maintenant, quelque chose de complètement différent.
Et maintenant, quelque chose de complètement différent.
Et maintenant, quelque chose de complètement différent.
Et maintenant, quelque chose de complètement différent.
Period.

Il y a un avantage évident : Vous l'aviez vu venir !

Achetez maintenant et recevez rien gratuitement !
Eh bien, au moins pas de bière gratuite. Peut-être un ours,
si vous pouvez vous le permettre.

Maintenant que vous avez... votre ours, vous devez l'admettre !

Non, nous ne vendons pas d'ours.

Louez un ours, ... obtenez-en deux pour trois bières.

Navigation : liste non ordonnée avec ancres et listes imbriquées. Sauvegarde de l'état (persistance) basée sur la position : l'élément actif est sélectionné selon location.hash. Cliquez sur un lien, puis rechargez la page.

Code

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

Avec options, le conteneur est une liste de définitions, le titre est en dt, le contenu en 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');
});

Structure Divitus, conteneur div, titre div (class="title"), contenu div, aucun panneau ouvert à l'état initial, les panneaux peuvent être entièrement fermés. Code

jQuery('#list3').accordion({
	header: 'div.title',
	active: false,
	alwaysOpen: false,
	animated: false,
	autoheight: false
});

Tennis

Une balle, deux joueurs. Beaucoup de plaisir.

Football

Une balle, 22 joueurs. Beaucoup de plaisir. Aller sur google ?

Baseball

Eh bien, une balle, des gars qui courent partout, des gars qui en frappent d'autres avec une batte.
Cela semble amusant, non ?

Eh bien, sauf la partie course. Exemple de navigation

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

Titre 1

Contenu 1

Titre 2

Contenu 2

Titre 3

Contenu 3

Activation par sélecteur, par exemple ':first' ou ':eq(1)' :

Journal

Exemple de démonstration du plugin jQuery Accordion

Code