//pour commencer avec les elements fermés au départs
var stretchers = $$('div.accordeon');
stretchers.each(function(item){
	item.setStyles({'height': '0', 'overflow': 'hidden'});
});

//au chargement de la page
window.onload = function(){ 
		
	var togglers = $$('div.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



togglers.each(function(element) {
	element.setStyles({'background-position': '-10px 3px'});
  
	onActive: function(toggler){
		toggler.setStyles({'background-position': '0px 3px'});
	}
	onBackground: function(toggler){		
		toggler.setStyles({'background-position': '-10px 3px'});
	}
  
});


	// 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});
	
	
		
};