jQuery: pannelli con effetto accordion

Immaginiamo di avere una serie di intestazioni, ciascuna seguita da uno o più paragrafi. Con jQuery possiamo creare l'effetto di pannelli che si aprono e si chiudono utilizzando i metodi slideDown(), slideUp() e slideToggle(). Utilizzeremo anche una sprite CSS per aggiungere delle icone che indichino l'apertura e la chiusura del pannello. Vediamo insieme i dettagli.

Partiamo da questa struttura HTML:

<div class="accordion">
	<h3>...</h3>
	<p>...</p>
	<!-- si ripete -->
</div>

I nostri stili CSS di base saranno i seguenti:

body {
	margin: 10px auto;
	width: 570px;
	font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
	width: 480px;
	border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
	background: #e9e7e7 url(arrow-square.gif) no-repeat right -51px;
	padding: 7px 15px;
	margin: 0;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	border: solid 1px #c4c4c4;
	border-bottom: none;
	cursor: pointer;
}
.accordion h3:hover {
	background-color: #e3e2e2;
}
.accordion h3.active {
	background-position: right 5px;
}
.accordion p {
	background: #f7f7f7;
	margin: 0;
	padding: 10px 15px 20px;
	border-left: solid 1px #c4c4c4;
	border-right: solid 1px #c4c4c4;
}

La classe CSS active non fa altro che modificare la coordinata verticale dell'immagine di sfondo, mostrando così l'altra icona. Il nostro codice jQuery non farà altro che rendere cliccabili le intestazioni associando loro un azione sul contenuto che segue:

$(function() {

  $('h3:first', 'div.accordion').addClass('active');
	$('p:not(:first)', 'div.accordion').hide();

	$('h3', 'div.accordion').click(function(){
	   
	   var $h3 = $(this);
	   
		$h3.next('p')
		.slideToggle('slow')
		.siblings('p:visible')
		.slideUp('slow');
		
		
		$h3.toggleClass('active');
		
		
		$h3.siblings('h3')
		.removeClass('active');
		
	});

});

Inizialmente solo il paragrafo che segue la prima intestazione sarà visibile. Quindi andiamo a selezionare solo il paragrafo che segue ciascuna intestazione e lo mostriamo quando l'utente fa clic sull'intestazione stessa, nascondendo al contempo tutti gli altri. La classe active verrà aggiunta solo all'intestazione corrente e rimossa da tutte le altre.

Potete visionare l'esempio finale in questa pagina.