Un effetto accordion in jQuery si ottiene nascondendo un elemento di blocco (che può contenere un menu on del semplice contenuto testuale) e rendendo cliccabile l'elemento che in genere lo precede. A questo elemento viene di solito aggiunta un'immagine di sfondo che verrà modificata quando il blocco che segue verrà mostrato o nascosto di nuovo. I metodi jQuery usati in questa tecnica sono slideDown() and slideUp(). Questi due metodi necessitano della dichiarazione CSS display: none sul blocco da mostrare o nascondere.
La marcatura è molto semplice:
<h2 class="accordion-header"></h2>
<div class="accordion">...</div>
<!-- altri accordion -->
L'intestazione nel nostro caso è l'elemento cliccabile e il blocco che segue il testo da nascondere e mostrare. Gli stili CSS sono altrettanto semplici:
h2.accordion-header {
font: 2em 'Trebuchet MS', Trebuchet, sans-serif;
margin: 0 0 0.2em 0;
height: 1.5em;
line-height: 1.5;
background: url(accordion-on.png) no-repeat 0 0;
padding-left: 45px;
text-transform: uppercase;
cursor: pointer;
}
h2.accordion-header-off {
background: url(accordion-off.png) no-repeat 0 0;
cursor: pointer;
}
div.accordion {
margin: 0.4em 0;
padding: 1em;
background: #a40;
color: #fff;
line-height: 1.4;
display: none;
}
La classe CSS accordion-header-off verrà applicata con jQuery quando l'elemento nascosto verrà mostrato e quindi rimossa quando tale elemento verrà nascosto nuovamente. Con jQuery dobbiamo semplicemente verificare se l'elemento che segue è nascosto o meno: se lo è, useremo il metodo slideDown() e applicheremo la nostra classe CSS, altrimenti useremo slideUp() e rimuoveremo tale classe:
$(function() {
$('h2.accordion-header', 'body').each(function() {
var $h2 = $(this);
var accordion = $h2.next();
$h2.click(function() {
if(accordion.is(':hidden')) {
accordion.slideDown('slow');
$h2.addClass('accordion-header-off');
} else {
accordion.slideUp('slow');
$h2.removeClass('accordion-header-off');
}
});
});
});
Potete vedere l'esempio finale in questa pagina.