Oggi vi segnalo un esempio di accordion cross-browser (testato su IE6-7-8, FF3.5+, Safari, Chrome) che ho più volte utilizzato grazie alla sua estrema semplicità. A differenza dell’accordion di cui ho parlato recentemente, questo esempio è sicuramente più “specifico”, inoltre vi ricordo che, a differenza di quelli preconfezionati che si trovano in giro, deve essere adattato alle vostre esigenze (cambiando ad esempio a mano le classi nel codice js).

Passo subito a mostrarvi lo script intero, così come lo vedete nella demo. Inannzitutto ricordatevi di includere jQuery nella vostra pagina e di collegarlo correttamente, dopodichè creiamo un file .js con il nostro script e richiamiamo anche questo nell’html. Fatto ciò richiamiamo la funzione che esegue il nostro script l’accordion direttamente dalla funzione document.ready

$(document).ready(function() {
	apriChiudi();
});

Questo sarà il codice che andremo ad utilizzare:

function apriChiudi() {
  $('.box_menu .tipologie').hide();
        $('.tipologie:eq(0)').slideDown('normal');
  $('.box_menu a.opener').click(
    function() {
    	//se l'elenco successivo è aperto nulla
      var contenuto = $(this).next();
      if((contenuto.is('div')) && (contenuto.is(':visible'))) {
        return false;
        }
        //se è chiuso lo apro
      if((contenuto.is('div')) && (!contenuto.is(':visible'))) {
        $('.box_menu  .tipologie:visible').slideUp('normal');
        contenuto.slideDown('normal');
        return false;
        }
      }
    );
  }

La spiegazione dello script è molto semplice. Analizziamo passo passo la struttura per capirla meglio.

  $('.box_menu .tipologie').hide();
        $('.tipologie:eq(0)').slideDown('normal');

Chiudiamo tutti i div tipologie nascondendoli e mostriamo solo il primo (eq(0)) dandogli l’effetto a discesa verso il basso (slideDown).

$('.box_menu a.opener').click(
    function() {
    	//se l'elenco successivo è aperto nulla
      var contenuto = $(this).next();
      if((contenuto.is('div')) && (contenuto.is(':visible'))) {
        return false;
        }

Al click sulla voce della tab (antipasti, primi piatti ecc…) creiamo una variabile contenuto che memorizza l’elemento successivo al link cliccato (e quindi,ad esempio se clicchiamo su primi piatti, la tab contenente l’elenco ad esempio dei primi piatti). Se questo contenuto esiste ed è già visibile non fare nulla.

if((contenuto.is('div')) && (!contenuto.is(':visible'))) {
        $('.box_menu  .tipologie:visible').slideUp('normal');
        contenuto.slideDown('normal');
        return false;
        }

Se invece il contenuto esiste ma non è visibile allora nascondimi con effetto slideUp la voce visibile e fammi vedere la tab dell’accordion che mi interessa con effetto slideDown. Semplice no? Se avete consigli o domande non esitate a scriverle!