Un semplice Accordion con jQuery

Gli Accordion menu sono sempre più usati.

In verità anche non solo per i menu, ma per i box con divesri contenuti.

Se avete jQuery UI già integrato potete tranquillamente usare la funzione accordion inclusa.

Sennò, con jQuery, possiamo crearne uno noi in maniera semplice.

Partiamo dalla pagina:

<div id="accordion"> <div class="level"> <a href="#" class="opening"><h3>DIV 1</h3></a> <div class="expanded"> <p> TESTO </p> </div> <a href="#" class="opening"><h3>DIV 2</h3></a> <div class="expanded"> <p> TESTO </p> </div> <a href="#" class="opening"><h3>DIV 3</h3></a> <div class="expanded"> <p> TESTO </p> </div> </div> </div>

Abbiamo 3 div con diverso conteuto.

Non abbiamo bisogno di un CSS particolare, faremo tutto con jQuery.

$(function() {
    $("#accordion .expanded").hide();
    $(".opening").click(function() {
       $("*").children('.visibile').hide();
       $("*").children('.visibile').removeClass('visibile');
       $(this).next().slideToggle(1500, function() {
       $(this).prev("a.opening").toggleClass("active");
       $(this).toggleClass("visibile");
    });
    return false;
   });
});

Quello che facciamo non è altro che giocare sul CSS.

La funzione toggleClass() serve per aggiungere una classe a un elemento; removeClass() fa il contrario.

Con le funzioni prev() e next() navighiamo il DOM partendo da un elemento specifico.

Con children() recuperiamo i vari nodi partendo da un elemento.

Anche se non è accattivante come jQuery UI è comunque funzionale e semplice da implementare.

Ed inoltre non dobbiamo portarci appresso un libreria così grossa e tutto il suo CSS.