Brainleaf
Web Resources
jquery

In questo articolo vedremo come realizzare un semplice "accordion" utilizzando soltanto la libreria jQuery. Nessun plugin esterno verrà utilizzato per questo tutorial.

Prima di tutto si dovrà provvedere a strutturare un progetto con i relativi file necessari, che saranno i seguenti:

  • accordion.html
  • accordion.css
  • accordion.js

 

 

Il markup HTML

Come prima cosa, dovremo preparare il corretto markup necessario alla realizzazione dell'accordion. Allo stesso tempo si dovrà anche preparare lo stile css da associare all'elemento.


<!-- ############################################### -->
<!-- ACCORDION -->
<!-- ############################################### -->
<div id="accordion" class="accordion">

    <!-- Accordion Item -->
    <!-- ************************* -->
    <div class="accordion_item active">
        <div class="accordion_item-title">
            <h3>Accordion Item Title</h3>
        </div>
        <div class="accordion_item-body">
            <h4>Accordion Item Body Title</h4> 
            <p>
                Labore possumus hic iudicem, do arbitror de consequat, magna laborum 
                familiaritatem se ingeniis labore ad probant arbitrantur, commodo labore a 
                officia graviterque ab irure consectetur quamquam lorem quamquam, occaecat 
                cillum arbitror commodo, voluptate a vidisse. Fugiat tempor illustriora, et aut 
                arbitrantur iis voluptate quae quorum cupidatat labore, aliqua exquisitaque 
                senserit quorum eiusmod. Malis hic quibusdam qui id probant ubi iudicem, aute o 
                est malis ingeniis ad non laborum fidelissimae a deserunt est legam arbitror ubi 
                quem quamquam ad praetermissum, litteris eu quae, ut quae iudicem aliquip. Ne 
                amet probant graviterque, quae doctrina familiaritatem. Summis consequat 
                doctrina. Illum sed mandaremus iis nulla sed possumus sint te quamquam 
                sempiternum. Quibusdam concursionibus ubi excepteur, ea te enim appellat, nisi 
                se quamquam, ne illum arbitror despicationes.
            </p>
        </div>
    </div>

    <!-- Accordion Item -->
    <!-- ************************* -->
    <div class="accordion_item">
        <div class="accordion_item-title">
            <h3>Accordion Item Title</h3>
        </div>
        <div class="accordion_item-body">
            <h4>Accordion Item Body Title</h4> 
            <p>
                Labore possumus hic iudicem, do arbitror de consequat, magna laborum 
                familiaritatem se ingeniis labore ad probant arbitrantur, commodo labore a 
                officia graviterque ab irure consectetur quamquam lorem quamquam, occaecat 
                cillum arbitror commodo, voluptate a vidisse. Fugiat tempor illustriora, et aut 
                arbitrantur iis voluptate quae quorum cupidatat labore, aliqua exquisitaque 
                senserit quorum eiusmod. Malis hic quibusdam qui id probant ubi iudicem, aute o 
                est malis ingeniis ad non laborum fidelissimae a deserunt est legam arbitror ubi 
                quem quamquam ad praetermissum, litteris eu quae, ut quae iudicem aliquip. Ne 
                amet probant graviterque, quae doctrina familiaritatem. Summis consequat 
                doctrina. Illum sed mandaremus iis nulla sed possumus sint te quamquam 
                sempiternum. Quibusdam concursionibus ubi excepteur, ea te enim appellat, nisi 
                se quamquam, ne illum arbitror despicationes.
            </p>
        </div>
    </div>

    <!-- Accordion Item -->
    <!-- ************************* -->
    <div class="accordion_item">
        <div class="accordion_item-title">
            <h3>Accordion Item Title</h3>
        </div>
        <div class="accordion_item-body">
            <h4>Accordion Item Body Title</h4> 
            <p>
                Labore possumus hic iudicem, do arbitror de consequat, magna laborum 
                familiaritatem se ingeniis labore ad probant arbitrantur, commodo labore a 
                officia graviterque ab irure consectetur quamquam lorem quamquam, occaecat 
                cillum arbitror commodo, voluptate a vidisse. Fugiat tempor illustriora, et aut 
                arbitrantur iis voluptate quae quorum cupidatat labore, aliqua exquisitaque 
                senserit quorum eiusmod. Malis hic quibusdam qui id probant ubi iudicem, aute o 
                est malis ingeniis ad non laborum fidelissimae a deserunt est legam arbitror ubi 
                quem quamquam ad praetermissum, litteris eu quae, ut quae iudicem aliquip. Ne 
                amet probant graviterque, quae doctrina familiaritatem. Summis consequat 
                doctrina. Illum sed mandaremus iis nulla sed possumus sint te quamquam 
                sempiternum. Quibusdam concursionibus ubi excepteur, ea te enim appellat, nisi 
                se quamquam, ne illum arbitror despicationes.
            </p>
        </div>
    </div>

</div><!-- /end accordion -->
<!-- ############################################### -->

Come avete avuto modo di vedere nel codice, è stato realizzato un contenitore principale per tutto l'accordion al quale è stata assegnata una id univoca e la classe .accordion

All'interno dell'accordion sono poi stati inseriti i singoli item con classe .accordion_item contenenti a loro volta i due elementi .accordion_item-title.accordion_item-body, rispettivamente il titolo (che funzionerà come pulsante di apertura dell'item) e il contenuto (la parte collassabile) del singolo item.

Ovviamente ogni accordion può contenere un numero potenzialmente infinito di item e gli elementi .accordion_item-title.accordion_item-body possono contenere al loro interno qualsiasi tipo di markup.

CSS

 


body {
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #666;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
}

h4 {
    font-weight: 800;
}

.accordion_item-title {
    padding: 5px 20px;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: aqua;
    background-color: aquamarine;
    cursor: pointer;
    -webkit-transition: background 0.2s ease;
            transition: background 0.2s ease;
}

.accordion_item-title:hover {
    background-color: aqua;
}

.accordion_item:last-child .accordion_item-title {
    border-width: 1px;
}

.accordion_item.active .accordion_item-title {
    padding: 5px 20px;
    background-color: aqua;
}

.accordion_item-title h3 {
    font-size: 1.2em;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.accordion_item-body {
    display: none;
    padding: 5px 20px;
    border-width: 0 1px;
    border-style: solid;
    border-color: aqua;
    color: #999;
}

.accordion_item.active:last-child .accordion_item-body {
    border-width: 0 1px 1px 1px;
}

C'è poco da dire a proposito dello stile CSS che in sostanza non fa altro che definire l'aspetto dell'accordion e può praticamente essere sovrascritto tranquillamente secondo le specifiche esigenze. Ciò che è importante è che l'elemento .accordion_item-body resti sempre in display none. Tutto il resto sta alla fantasia di ognuno.

JQUERY

Come ultima parte tratteremo il codice jQuery relativo all'accordion.
Di fatto questa è la parte di tutorial vera e propria, nella cercherò di spiegare ogni riga di codice in modo che ciò che verrà appreso in pratica sarà poi utilizzabile in altri scenari.

Iniziamo quindi a dar vita ad una funzione riutilizzabile più volte nella stessa pagina. Chiameremo la funzione (con molta fantasia) accordion. La funzione dovrà prevedere due parametri che indichino l'elemento del markup consistente nell'accordion e la velocità di apertura di ogni singolo item.


function accordion(element, speed) {}

Ora che abbiamo una funzione, dovremo provvedere a popolarla di tutta la logica necessaria alla realizzazione dell'accordion. Come prima passo dovremo definire cosa vogliamo ottenere dal codice che ci apprestiamo a scrivere. Per l'accordion in questione gli step necessari alla sua realizzazione saranno i seguenti:

  1. aprire al caricamento della pagina l'item che abbiamo deciso debba essere aperto al momento del caricamento della pagina (l'item del markup al quale è stata assegnata a mano la classe .active);
  2. far si che al click su ogni titolo si chiudano tutti gli altri item e si apra solo quello relativo al titolo cliccato.

Vediamo quindi come realizzare queste due semplici operazioni. Come prima cosa istruiremo la nostra funzione ad aprire l'item con classe .accordion_item.active all'interno dell'accordion. Dato che vogliamo che la funzione sia riutilizzabile più volte nella stessa pagina e ci permetta di gestire più accordion, utilizzeremo il selettore element (uno dei parametri della funzione) per selezionare la classe solo all'interno dell'accordion in questione e prevenire così conflitti con altri accordion.

I metodi jQuery utilizzati saranno .find() , che permette di rintracciare delle classi all'interno di un elemento e .show() , che permette di mostrare un elemento in display none.


function accordion(element,speed) { 
    $(element).find('.accordion_item.active > .accordion_item-body').show();   
}

Ora che abbiamo aperto l'item di default dovremo passare al secondo step. 
Ciò che vogliamo ottenere è che al click su uno dei titoli interni, l'item contenente il titolo cliccato si apra mostrando il suo contenuto. Per far questo dovremmo far uso dell'evento click di jQuery, associandolo ad ogni titolo di ogni item dell'account. 


function accordion(element,speed) {
    
    $(element).find('.accordion_item.active > .accordion_item-body').show();
    
    $(element).find('.accordion_item-title').on('click', function(e) {
        e.preventDefault();
    });  
}

La riga e.preventDefault(); serve a prevenire il comportamento di default dell'elemento al quale viene associato l'evento click. In sostanza questo significa che se l'elemento in questione fosse per esempio un link, al momento del click, questo perderebbe il suo comportamento nativo e quindi non caricherebbe la pagina inserita nell'attributo href del tag. Questa riga è stata aggiunta per lasciare più libertà nella gestione del markup dell'accordion.

Gestiamo adesso tutto ciò che accadrà ad ogni click partendo dalla chiusura di tutti gli elementi eventualmente aperti dell'accordion e dalla rimozione della classe .active assegnata agli elementi aperti. I metodi jQuery utilizzati saranno .removeClass(), per rimuovere la classe .active e .slideUp() , per far chiudere gli elementi aperti con un effetto di slide verso l'alto. Al metodo .slideUp() verrà passato il parametro speed della funzione accordion che servirà per impostare la velocità di chiusura dell'elemento (velocità espressa in millisecondi)


$(element).find('.accordion_item').removeClass('active');
$(element).find('.accordion_item-body').slideUp(speed);

Subito dopo assegneremo invece all'item cliccato la classe .active, utilizzando il metodo .addClass() e faremo aprire il suo contenuto utilizzando .slideDown() Il modo in cui è possibile isolare l'effetto del click al singolo elemento, facendo così aprire soltanto il contenuto associato all'item di cui è stato cliccato il titolo è grazie all'uso di this, che ci permette di riferirci al singolo elemento che ha ricevuto fisicamente il click.
A partire da esso è possibile rintracciare il suo elemento parent con classe .accordion_item grazie al metodo .closest() e potergli quindi assegnare la classe .active e grazie al metodo .next() è possibile invece selezionare solo l'elemento con classe .accordion_item-body adiacente all'elemento cliccato.


$(this).closest('.accordion_item').addClass('active');
$(this).next('.accordion_item-body').slideDown(speed);

L'ultima cosa che rimane da fare è assicurarci che tutto ciò che abbiamo previsto accada al momento del click, avvenga solo se l'item relativo al titolo cliccato non sia già aperto.
Per far questo dovremo semplicemente controllare se l'item parent del titolo cliccato abbia assegnata o meno la classe .active.

Faremo questo attraverso l'uso del metodo .hasClass() di jQuery eseguendo il codice solo se l'elemento non ha la classe .active assegnata. Ecco il codice completo della funzione:


function accordion(element,speed) {
    
    $(element).find('.accordion_item.active > .accordion_item-body').show();
    
    $(element).find('.accordion_item-title').on('click', function(e) {
        e.preventDefault();
        if(!$(this).closest('.accordion_item').hasClass('active')) {
            $(element).find('.accordion_item').removeClass('active');
            $(element).find('.accordion_item-body').slideUp(speed);
            $(this).closest('.accordion_item').addClass('active');
            $(this).next('.accordion_item-body').slideDown(speed);
        }
    });
    
}

Uso dell'accordion

Finita la stesura della funzione non servirà far altro che lanciarla al caricamento della pagina usando l'evento document ready di jQuery, passando alla funzione l'id dell'accordion e la velocità di apertura/chiusura dell'item.


$(document).on('ready', function() {
    accordion('#accordion',300);
});

 Come avrete modo di provare voi stessi, tutto è molto semplice e intuitivo. Non vi resta che provare voi stessi.

Live Demo Download

Potete anche usare più comodamente jsFiddle per eseguire i vostri test.

Joomla SEF URLs by Artio