//pour commencer avec les elements fermés au départs

var stretchers = $$('div.accordion');

stretchers.each(function(item){

item.setStyles({'height': '0', 'overflow': 'hidden'});

});



//au chargement de la page

window.onload = function(){



var togglers = $$('h3.toggler'); //on met dans la variable togglers tous les div H4 de la page appartenant a la classe toggler. C'est la syntaxe $$ de element de Mootools qui permet cela très facilement



var bgFx = []; //variable pour la gestion des couleurs de fond


togglers.each(function(toggler, i){

toggler.defaultColor = toggler.getStyle('background-color');

//fx creation

bgFx[i] = new Fx.Color(toggler, 'background-color', {wait: false});

});



// creation de l'effet accordeon

//syntaxe : new Fx.Accordion(quel_div_visible, quel_div_a_afficher, {options eventuelles});

var myAccordion = new Fx.Accordion(togglers, stretchers, { opacity: false, start: false, transition: Fx.Transitions.quadOut,



onActive: function(toggler, i){

bgFx[i].toColor('#000'); //quand un element est actif

toggler.getFirst().setStyle('color', '#fff');

},



onBackground: function(toggler, i){

bgFx[i].clearTimer(); //quand un element n'est actif

toggler.setStyle('background-color', toggler.defaultColor);

toggler.getFirst().setStyle('color', '#222');

}

});



//permet de reouvrir directement le bon element

//grace à l'url test.html#cat_a_ouvrir

function checkHash(){

var found = false;

$$('h3.toggler a').each(function(link, i){

if (window.location.hash.test(link.hash)){

myAccordion.showThisHideOpen(i);

found = true;

}

});

return found;

}



if (!checkHash()) myAccordion.showThisHideOpen(0);


};