Devo ammettere che seppur si tratti di qualcosa di relativamente semplice, era una sfida quella di ottenere il massimo rendimento da un accordion con il minimo numero di righe, senza per questo rinunciare alle funzionalità essenziali. Già in altri articoli abbiamo proposto soluzioni valide, ma credo che queste semplici righe offrano una soluzione più semplice e totalmente cross-browser per gestire al meglio, ad esempio, una pagina di faq.

tasto per vedere una demo

Un markup versatile e multilivello

Il codice che utilizzeremo ci permette di creare infiniti sottolivelli annidati, è però importante che si mantenga la struttura html seguente:

<div id="accordion">
	<div class="level">
		<a class="opening" href="#">Faq</a>
		<div class="expanded">
			Inserire qui il testo
			<div class="level">
				<a class="opening" href="#">Sottovoce</a>
				<div class="expanded">
				Inserire qui il testo del div espanso
				</div>
				<a class="opening" href="#">Altra sottovoce</a>
				<div class="expanded">
				Inserire qui il testo del div espanso
				</div>
			</div><!--/.level-->
		</div><!--/.expanded-->
		<a class="opening" href="#">Altra Faq</a>
		<div class="expanded">
		Inserire qui il testo
		</div><!--/.expanded-->
	</div><!--/.level-->
</div><!--/#accordion-->
Ciò che risulta fondamentale è inserire il link a.opening prima della voce corrispondente expanded (che corrisponde al dettaglio del nostro link), il tutto dentro al div #accordion ed il markup è pronto. I div level sono stati inseriti per comodità stilistiche ma, volendo essere ancora più minimalisti, potrebbero essere tranquillamente rimossi.

Come possiamo vedere potremmo andare avanti ad annidare ulteriori livelli utilizzando la stessa struttura. Sarà poi via CSS che dovremo preoccuparci di differenziare visivamente le sottovoci.

Il codice CSS d’esempio

A titolo esemplificativo riportiamo il codice CSS, realtivo all’accordion, utilizzato nell’esempio anche se non c’è alcun accorgimento particolare da seguire, libero sfogo alla vostra creatività quindi!

a.opening {
	font-family: 'Oswald', Arial, sans-serif;
	display:block;
	background: url(bullet_blue.png) no-repeat 10px center #fff;
	padding:3px 30px;
	text-decoration:none;
	color:#2f3040;
	font-weight:bold;
	font-size:1.2em;
	border-bottom:1px solid #2f3040;
	border-left:1px solid #2f3040;
	border-right:1px solid #2f3040;
	}
 
a.opening:hover, a.active {
	color:#fff;
	background: url(bullet_gray.png) no-repeat 10px center #2f3040;
	}
.expanded {
	background:url(concrete_wall_3.png);
	padding:15px;
	font-size:0.9em;
	letter-spacing:-1px;
	border-bottom:1px solid #2f3040;
	border-left:1px solid #2f3040;
	border-right:1px solid #2f3040;
	}
.expanded p {
	padding-bottom:20px;
	}
.expanded .expanded {
	background:url(concrete_wall.png);
	padding:0;
	color:#fff;
	}
.expanded .expanded p {
	padding:15px;
	}

5 righe di codice jQuery per dare vita al nostro accordion

Premesso che per far partire il nostro script dovremo ricorrere all’uso della funzione document.ready oppure alla sintassi $(function(){ ecc..., vediamo come sia sufficiente utilizzare 3 funzioni per dare vita al nostro accordion. Ecco il codice completo:

$("#accordion .expanded").hide();
	$("a.opening").click(function(){
		$(this).next().slideToggle('fast', function(){
			$(this).prev("a.opening").toggleClass("active");
		});
	return false;
});

Attraverso l’uso della funzione hide() nascondiamo tutti i sottolivelli, successivamente facciamo in modo che cliccando su un link con classe .opening si apra velocemente (fast) l’elemento successivo .next() al link stesso. Usando la funzione slideToggle() facciamo anche in modo che cliccando nuovamente sul link l’elemento successivo si chiuda.

Utilizzando la funzione toggleClass() in combinazione con slideToggle() aggiungiamo o togliamo la classe active al link. Per identificare il link nuovamente occorre utilizzare la funzione .prev() che permette di riferirsi all’elemento precedente del nostro markup. In questa funzione, this fa riferimento all’elemento su cui si clicca nel primo caso e a quello su cui è stata eseguita la funzione slideToggle nel secondo caso.

Infine attraverso il return false diciamo al browser di non seguire l’url presente nell’attributo href del nostro link.

Missione compiuta! E tu conosci altri modi efficaci per realizzare un accordion?