Web e code script visite 21

Aprire e chiudere div con jQuery UI Accordion

3 min

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.

Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo
Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo

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:

Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo
Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo

» 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.

Riproduzione riservata © La riproduzione è concessa solo citando la fonte con link all'articolo. Condividi l'articolo


Articolo a cura di: Del Re Valerio
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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *



Potrebbe anche interessarti

webdesign

Web e code script

Icone Vettoriali Gratis. Prova Flaticon, il più grande database

1 minSe siete alla ricerca di icone vettoriali gratis per i vostri siti…

webdesign

Web e code script

IL LINGUAGGIO HTML | Di cosa si tratta

2 min L’html è il linguaggio con cui potete indicare come i vari…

webdesign

Web e code script

Come utilizzare include di php nella costruzione del sito

4 min La progettazione è un momento importante e da non sottovalutare per…