ho quest' esempio , non riporto i .js ma qui è gestito l'evento:
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title></title>

  
<link rel=stylesheet href="css/main.css" type="text/css" media=screen>  
  
<script src="js/mootools1.2.js" type="text/javascript"></script>
<script src="js/mootools-1.2-more.js" type="text/javascript"></script>

  
<script src="js/external_file.js" type="text/javascript"></script>  
 

<script type="text/javascript">  
//look for the functions within the external javascript file

window.addEvent('domready', function() {
	//send the toggle and content arrays to vars
	var toggles = $$('.togglers');
	var content = $$('.elements');
	
	//set up your object var
	//create a "new" Accordian object
	//set the toggle array
	//set the content array
	//set your objects and events 
	var AccordionObject = new Accordion(toggles, content, {
		//when you load the page
		//will "show" the content (by index)
		//with NO transition, it will just be open
		//also note: if you use "fixedHeight," 
		//show will not work when the page first loads
		//"show" will override "display"
		//show: 0, 
	
	
		//when you load the page
		//this will "display" the content (by index)
		//and the content will transition open
		//if both display and show are set, 
		//show will override display
		display: 0,
		
		//defaults to true
		//this creates a vertical accordian
		height : true,
		
		//this is for horizontal accordians
		//tricky to use due to the css involved
		//maybe a tutorial for another day?
		width : false,
		
		//defaults to true
		//will give the content an opacity transition
		opacity: true,
		
		//defaults to false, can be integar - 
		//will fix height of all content containters
		//would need an overflow css rule
		//wont work on page load if you use "show"
		fixedHeight: false, 
		
		//can be false or an integer
		//similiar to fixedHeight above, 
		//but for horizontal accordians
		fixedWidth: false,
		
		//lets you toggle an open item closed
		alwaysHide: true,
	
		//standard onComplete event
		//passes a variable containing the element for each content element		
		onComplete: function(one, two, three, four, five){
			one.highlight('#5D80C8'); //blue
			two.highlight('#5D80C8');
			three.highlight('#5D80C8');
			four.highlight('#5D80C8'); 
			five.highlight('#5D80C8'); //the added section
			$('complete').highlight('#5D80C8');
		},
		
		//this will fire when you toggle open an element
		//will pass the toggle control element
		//and the content element that is opening
		onActive: function(toggler, element) {
			toggler.highlight('#76C83D'); //green
			element.highlight('#76C83D');
			$('active').highlight('#76C83D');
		},
		
		//this will fire when an element starts to hide
		//will pass all other elements
		//the one closing or not opening
		onBackground: function(toggler, element) {
			toggler.highlight('#DC4F4D'); //red
			element.highlight('#DC4F4D');	
			$('background').highlight('#DC4F4D');	
		}
	});
	
	$('add_section').addEvent('click', function(){
		//the new section is made up of a pair 
		//(the new toggle ID and the corresponding Content ID) 
		//followed by where you want to place it in the index
		AccordionObject.addSection('togglersID', 'elementsID', 0);    
	});
	
	$('display_section').addEvent('click', function(){
		//will determine which object displays first on page load
		//will override the options display setting
		AccordionObject.display(4);  
	});

});
</script>   


</head>
<body>
	<div id="complete" class="ind">onComplete</div>
	<div id="active" class="ind">onActive</div>
	<div id="background" class="ind">onBackground</div>

	<div id="accordian_wrap">
    	<h3 class="togglers">Toggle 1</h3>
        <p class="elements">Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here is the content of toggle 1</p>
        <h3 class="togglers">Toggle 2</h3>
        <p class="elements">Here is the content of toggle 2</p>
        <h3 class="togglers">Toggle 3</h3>
        <p class="elements">Here is the content of toggle 3</p>
        <h3 class="togglers">Toggle 4</h3>
        <p class="elements">Here is the content of toggle 4</p>
        <h3 id="togglersID">Toggle Add</h3> 
        <p id="elementsID">Here is the content of toggle 4</p> 
    </div>
    <button id="add_section">add section</button>
    <button id="display_section">display section</button>
    <ul>[*].display seems to require that you set the "show" option to work[*].display will recognize the index, but if you use addSection, that section will be the last index[*]if you use "fixedHeight," "show" will not work on page load, but "display" works fine[/list]
</body>
</html>
in particolare:
codice:
	//standard onComplete event
		//passes a variable containing the element for each content element		
		onComplete: function(one, two, three, four, five){
			one.highlight('#5D80C8'); //blue
			two.highlight('#5D80C8');
			three.highlight('#5D80C8');
			four.highlight('#5D80C8'); 
			five.highlight('#5D80C8'); //the added section
			$('complete').highlight('#5D80C8');
		},
è l'evento , non capisco pero' se si possa passare anzichè 5 elementi una variabile che identifica l'indice o l'id dell'elemento.
a me servirebbe una cosa del genere.
Grazie.