Web e Code Script

Aprire e chiudere div con jQuery UI Accordion

jQuery Accordion

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>

Accordion jQuery Plugin

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.




emoticons

avatar
Autore: Valerio Del Re

Dott. in Comunicazione e Pubblicità per le Organizzazioni,
Grafico e Web Designer freelance, CEO presso Robadagrafici


Cosa ne pensi? Esprimi la tua opinione.
Scrivi un commento.

Loading Facebook Comments ...

Ti potrebbero interessare anche:


font-awesome

Icon Font Awesome. Come inserire sul sito icone tramite font

Le icone sono ormai uno standard per chi realizza siti internet. Permettono infatti un’ottima personalizzazione per lo stile […]


testare-sito-mobile-online

Testare sito mobile online. Effettua il test con Google

Se sei un webdesigner sicuramente nell’ultimo periodo ti starai dedicando allo studio della tecnica del responsive design. Un […]


orologio-esadecimale

What colour is it? L’orologio esadecimale

Oggi vi segnalo un sito creativo, da veri nerd, per appassionati di grafica e web. Si tratta del […]


sfumature-css3

Come creare una sfumatura con CSS3

CSS3 ha tantissime potenzialità che ogni web designer dovrebbe conoscere per evitare di fare un uso spropositato di […]


css3-box-shadow

Ombra CSS3. Come aggiungerla a testo, div e immagini

CSS3 è una rivoluzione. Ci permette di aggiungere tanti effetti grafici agli oggetti presenti nelle nostre pagine web, […]


css3-border-radius

Come smussare angoli di immagini e div con CSS3 Border Radius

Con Html5 e CSS3 il mondo del web ha fatto un notevole passo avanti, offrendo un’esperienza più ricca […]


mappa-vettoriale-jquery

Mappa del mondo con ingrandimento in jQuery

Creare una mappa navigabile per il sito internet è diventata ormai pratica comune, specialmente quando si tratta di […]


atlas

Arriva Atlas, la concorrenza di Facebook a Google

È ufficiale: Google ha un concorrente. Si chiama Atlas ed è di proprietà di Facebook. Quest’ultimo aveva acquistato […]


jquery-document-ready-function

La base della sintassi di jQuery: $(document) .ready()

Se vi state avvicinando da poco a jQuery e state iniziando a studiarlo, avrete notato che spesso il […]


php-if-else

PHP: gestire le condizioni con le istruzioni if e else

Se state realizzando un sito nel linguaggio di programmazione Php, magari con il CMS WordPress, imparare a gestire […]


Shares

Robadagrafici.com non è una testata giornalistica in quanto viene aggiornato senza alcuna periodicità. Non può pertanto considerarsi prodotto editoriale ai sensi della legge 62/2001. Le immagini e i testi pubblicati sono valutati come di pubblico dominio: qualora il loro uso violasse diritti d'autore, lo si comunichi all'autore del blog che provvederà alla loro pronta rimozione.
Tutti i contenuti sotto Licenza Creative Commons. Marchi e loghi di soggetti terzi utilizzati in questo sito sono di proprietà esclusiva dei rispettivi proprietari.
Roba da Grafici © 2011-2016 - Progetto a cura di ServiziWeb Srl - Privacy & Cookies Policy