menu js qui se deplie automatiquement

bonjour
j'ai un code qui sur simple clique me delie des sous menu
le hic est que les sous menus sont automatiquement depliés, alors qu'il faudrait le depliement après le clik

mes code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="demo.css" type="text/css" />
	<script type="text/javascript" src="../mootools.js"></script>
	<script type="text/javascript" src="demo.js"></script>
	<title>Fx.Slide Demo</title>
</head>
<body>
	 <BOUCLE_arti(ARTICLES){id_article=48}>
	<h3 class="section">#TITRE
    </h3>
    </BOUCLE_arti>
	<div class="marginbottom">
		<a id="v_slideout" href="#">slide out</a>
		|
		<a id="v_slidein" href="#">slide in</a>
		|
		<a id="v_toggle" href="#">toggle</a>
		|
		<a id="v_hide" href="#">hide</a>
		|
		<a id="v_show" href="#">show</a>
		| <strong>status</strong>: <span id="vertical_status">open</span>
	</div>
	<div id="vertical_slide">
		<ul>
        <BOUCLE_prg(ARTICLES){id_article=11}>
    <li><a href="#URL_ARTICLE">#TITRE</a></li> <!-- 1er ligne du sous-menu -->
    </BOUCLE_prg>
     <BOUCLE_orateur(RUBRIQUES){id_rubrique=22}>
    <li><a href="#URL_RUBRIQUE">#TITRE</a></li> <!-- 2ième ligne du sous-menu -->
    </BOUCLE_orateur>
    <BOUCLE_rapport(RUBRIQUES){id_rubrique=4}>
    <li><a href="#URL_RUBRIQUE">#TITRE</a></li> <!-- 3ième ligne du sous-menu -->
    </BOUCLE_rapport>
</ul>
	</div>
 
</body>
</html>

puis le .js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
window.addEvent('domready', function() {
	var status = {
		'true': 'open',
		'false': 'close'
	};
 
	//-vertical
 
	var myVerticalSlide = new Fx.Slide('vertical_slide');
 
	$('v_slidein').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideIn();
	});
 
	$('v_slideout').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideOut();
	});
 
	$('v_toggle').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.toggle();
	});
 
	$('v_hide').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.hide();
		$('vertical_status').set('html', status[myVerticalSlide.close]);
	});
 
	$('v_show').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.show();
		$('vertical_status').set('html', status[myVerticalSlide.close]);
	});
 
	// When Vertical Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
	myVerticalSlide.addEvent('complete', function() {
		$('vertical_status').set('html', status[myVerticalSlide.close]);
	});

si quelqu'un pourrait m'aider se serait vraiment gentil...