1634 visualizzazioniAprire e chiudere div con jQuery UI Accordion
Tempo di lettura: 3 min
Capita spesso ai web designer di dover gestire i contenuti in spazi ristretti. Un plugin ci viene incontro, parliamo di jQuery UI Accordation, strumento utile ad aprire e chiudere sezioni di un sito a comando.
Potrebbe tornarvi utile quando dividete dei contenuti in categorie e volete che l’utente possa facilmente scegliere quelli che intende visualizzare, nascondendo di fatto i div che non gli interessano.
Attraverso questo tutorial pratico, realizzare questo effetto di mostra/nascondi div sarà semplicissimo.
Un esempio pratico
Vediamo come funziona il plugin jQuery UI Accordion attraverso un esempio chiarificatore.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Esempio pratico</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div id="accordion">
<h3>Sezione 1</h3>
<div>
<p>
Contenuto della sezione 4
</p>
</div>
<h3>Sezione 2</h3>
<div>
<p>
Contenuto della sezione 2
</p>
</div>
<h3>Sezione 3</h3>
<div>
<p>
Contenuto della sezione 3
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Sezione 4</h3>
<div>
<p>
Contenuto della sezione 4
</p>
</div>
</div>
</body>
</html>
Analisi del codice
Come avrete capito, abbiamo semplicemente richiamato i file della libreria jQuery più del codice css utile ad assegnare uno stile grafico accattivante al calendario (come da figura). Ecco i tre elementi fondamentali:
» jquery-ui.css : file di formattazione dei div
» jquery.js : librerie base di JQuery 1.8.3 (versione attuale)
» jquery-ui.js : funzioni
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Secondo passaggio, anch’esso molto semplice, abbiamo assegnato al div contenitore l’id accordion, all’interno del quale ci sono i vari div/sezione con i relativi titoli.
<div id="accordion">...</div>
Infine abbiamo creato la funzione che permette il funzionamento, posizionandola nell’head
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
Opzioni aggiuntive
Questo semplice ma utilissimo widget jQuery è altamente personalizzabile, potrete infatti decidere se mostrare/nascondere i div on click o on mouse hover, oppure utilizzare delle icone differenti, o lasciare che il div si espanda in lunghezza senza utilizzare delle dimensioni prestabilite.
Insomma un plugin comodissimo. Per ulteriori dettagli vi rimando alla documentazione completa.
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.