L'accordion è un elemento di interfaccia divenuto piuttosto popolare recentemente grazie al proliferare delle tante librerie Javascript per effetti che ne rendono estremamente semplice l'implementazione. Consigliato in tutte quelle occasioni in cui per qualunque motivo si desideri mostrare e nascondere in base all'interazione dell'utente specifiche sezioni della pagina, è stato usato come elemento primario dell'interfaccia nell'organizzazione dei contenuti, ma anche per creare box o pannelli nel contesto di layout più tradizionali. È il caso del sito di Apple:
Ma anche del Corriere della Sera, che nell'ambito del recente redesign ha introdotto l'accordion nel box inferiore destinato a presentare i blog e i forum del sito:
La particolarità di questi due esempi è che usano entrambi il mouseover invece che il click per attivare la visualizzazione delle sezioni nascoste. Non è cosa comune. E infatti, mentre in rete sono disponibili decine di esempi di accordion 'tradizionali', più raro è imbattersi in implementazioni basate sul mouseover. Per questo articolo ne abbiamo selezionato due. La prima, HoverAccordion, è un plugin per jQuery. La seconda, AutoAccordion, è basata su MooTools e sul plugin Accordion compreso in questa libreria.
HoverAccordion
L'autore del plugin, Bernd Matzner, dichiara esplicitamente che l'ispirazione per il suo lavoro è nata dalla volontà di emulare il pannello presente sul sito di Apple. Infatti, l'esempio principale che abbiamo riprodotto per l'articolo è modellato proprio su quello schema anche nella presentazione ottenuta con i fogli di stile.
Nel pacchetto zip allegato troverete nella cartella 'jquery' tutto il necessario per iniziare.
Per analizzare il codice partiamo dalla sezione <head> della pagina:
<link rel="stylesheet" href="stile.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.js"></script>
<script type="text/javascript" src="jquery.hoveraccordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// inizializza l'esempio
$('#example2').hoverAccordion({
activateitem: '1',
speed: 'fast'
});
$('#example2').children('li:first').addClass('firstitem');
$('#example2').children('li:last').addClass('lastitem');
});
</script>
Troviamo innanzitutto il richiamo al foglio di stile che provvede a definire l'aspetto visivo del pannello. Potete tenerlo come traccia per i vostri progetti ed eventualmente modificarlo a piacere, tenendo però presente che fa uso di immagini di sfondo appositamente create per replicare l'esempio di Apple e che alcune regole fanno riferimento a classi non definite nel markup HTML ma impostate dal plugin. I commenti presenti nel codice vi aiuteranno comunque a comprendere il tutto.
Vengono quindi caricati tre Javascript.
Il primo (jquery.min.js) è la versione compressa di jQuery.
Il secondo (jquery.hoverIntent.js) è hoverIntent, un plugin molto utile in queste occasioni dal momento che previene l'attivazione accidentale degli eventi mouseover facendo sì che essi scattino solo quando il mouse rallenta o si ferma sugli elementi che li attivano.
Per concludere, richiamiamo jquery.hoveraccordion.js, il plugin di cui ci serviremo per implementare il nostro accordion con hover.
Segue il codice di inizializzazione. Con
$('#example2').hoverAccordion({
activateitem: '1',
speed: 'fast'
});
diciamo di voler applicare l'interazione all'elemento (una lista non ordinata) con id="example2" usando due opzioni: activateitem serve a specificare quale sezione dell'accordion verrà visualizzata come espansa all'apertura della pagina; con speed specifichiamo la velocità della transizione (i valori possibili sono slow, normal e fast).
Le righe
$('#example2').children('li:first').addClass('firstitem');
$('#example2').children('li:last').addClass('lastitem');
sono attinenti all'esempio specifico su cui stiamo lavorando. Aggiungono infatti due classi (firstitem e lastitem) per far sì che il primo e l'ultimo item abbiano come sfondo un'immagine con gli angoli arrotondati.
Nella parte HTML è fondamentale osservare una cosa: la struttura del pannnello. Il plugin, infatti, funziona solo se la struttura è definita come una lista non ordinata con due livelli. Chiariamo.
Se si osserva l'esempio, si nota che il pannello presenta quattro intestazioni (Item 1, Item 2, Item 3,Item 4). Passando con il mouse sopra questi elementi si visualizza la sezione corrispondente.
Ora, le quattro intestazioni sono i list item (li) racchiusi in un elemento a della lista principale (quella con id="exemple2"), mentre le sezioni sono liste annidate all'interno di ciascuno di questi li. Riporto lo schema senza il contenuto per semplificare:
<ul id="example2">
<li><a href="#">Item 1</a>
<ul>
<li>Content #1 - Lorem ipsum dolor sit amet...</li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li>Content #2 - At vero eos et accusam et justo...</li>
</ul>
</li>
<li><a href="#">Item 3</a>
<ul>
<li>Content #3 - Sed diam nonumy eirmod tempor...</li>
</ul>
</li>
<li><a href="#">Item 4</a>
<ul>
<li>Content #4 - Vet clita kasd gubergren...</li>
</ul>
</li>
</ul>
Ribadisco: per costruire un accordion con HoverAccordion bisognerà sempre seguire questo schema. L'autore lo usa nella pagina del plugin anche per creare una sorta di menu/accordion molto accattivante.
Vi propongo, prima di passare avanti, un secondo esempio. Mostra come sia possibile scegliere quale sezione attivare all'apertura della pagina. Rispetto al primo esempio è bastato modificare così lo script di inizializzazione:
<script type="text/javascript">
$(document).ready(function(){
// inizializza l'esempio
$('#example2').hoverAccordion({
activateitem: '2',
speed: 'fast'
});
$('#example2').children('li:first').addClass('firstitem');
$('#example2').children('li:last').addClass('lastitem');
});
</script>
AutoAccordion
Per presentare AutoAccordion non sono partito dall'esempio ufficiale proposto sul sito. Ho invece provato ad applicare questa soluzione allo schema già visto in precedenza. Ne risulta questa demo, che non è identica alla prima solo per elementi come le immagini di sfondo sul primo e ultimo item. Il CSS è stato ovviamente modificato in alcuni punti per adeguarlo alla diversa implementazione.
Nella sezione <head> incorporiamo, oltre al foglio di stile, la versione 1.1 di MooTools e il piccolo plugin autoaccordion.js:
<link rel="stylesheet" href="stile.css" />
<script src="mootools.v1.11.js" type="text/javascript"></script>
<script src="autoaccordion.js" type="text/javascript"></script>
L'inizializzazione avviene con queste poche righe di codice, inserite però nel corpo della pagina, in fondo al documento:
<script type="text/javascript">
window.addEvent('load', function () {
var demo = new AutoAccordion($$('.handle', 'accordion'), $$('.drawer', 'accordion'));
});
</script>
Le parti cruciali sono state evidenziate con un colore diverso. Si tratta dei due argomenti fondamentali. Il primo fa riferimento agli elementi che attiveranno la visualizzazione delle varie sezioni quando si passa con il mouse sopra di essi. Nel nostro caso questi elementi presentano la classe 'handle' (.handle). Il secondo fa riferimento agli elementi che saranno visualizzati (le varie sezioni dell'accordion). Essi hanno come classe il valore 'drawer' (.drawer).
Nella parte HTML, quindi, rispetto all'esempio basato du HoverAccordion, è bastato aggiungere l'indicazione di queste classi sugli elementi opportuni:
<ul id="example2">
<li class="handle"><a href="#">Item 1</a>
<ul class="drawer">
<li>Content #1 - Lorem ipsum dolor sit amet...</li>
</ul>
</li>
<li class="handle"><a href="#">Item 2</a>
<ul class="drawer">
<li>Content #2 - At vero eos et accusam et justo...</li>
</ul>
</li>
<li class="handle"><a href="#">Item 3</a>
<ul class="drawer">
<li>Content #3 - Sed diam nonumy eirmod tempor...</li>
</ul>
</li>
<li class="handle"><a href="#">Item 4</a>
<ul class="drawer">
<li>Content #4 - Vet clita kasd gubergren...</li>
</ul>
</li>
</ul>
Nel caso di AutoAccordion, comunque, la struttura da definire non deve necessariamente essere basata su due livelli con ul annidate.
