reproduire un menu accordeon sans librairie

bonjour,
je voudrai mettre en place un menu accordeon sans utiliser des framework ( mootools, prototypes,...).
alors j ' ai écrit ce code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function changement_image(id1,id2){
	      	var el = document.getElementById(id2);
	      	var imag = document.getElementById(id1);
	      	    if(imag){
 
	      		         if(el.style.display=="none"){
	      		         	 el.style.display="block";
 
	      		         	}else{
	      		         		el.style.display="none";
	      		         	}
 
	      	    }
	      	    else{
	      	    	 alert('bon');
	      	    }
	      }

dans mon fichier xhtml j ' ai ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<ul class="ul_lesobjects">
		    	               	  <li>
		    	               	  	  <a href=""><img id="idimg" src="images/fleche_pg1.gif" onclick="changement_image('idimg','ul_lesobjects_sm');"/>COUVERTURE</a>
		    	               	  	  <ul class="ul_lesobjects_sm" style="display:block;">
		    	               	  	      <li><img src="images/icone_page.gif" /><span>couverture1</span></li>
		    	               	  	      <li><img src="images/icone_page.gif" /><span>couverture1</span></li>
		    	               	  	      <li><img src="images/icone_page.gif" /><span>couverture1</span></li>
		    	               	  	  </ul>
		    	               	  </li>
		    	               	  <li><img src="images/fleche_pg1.gif" />SOMMAIRE</li>
		    	               	  <li><img src="images/fleche_pg1.gif" />EDITO</li>
		    	               	  <li><img src="images/fleche_pg1.gif" />INTERVIEW</li>
		    	               	  <li><img src="images/fleche_pg1.gif" />PORTFOLIO</li>
		    	               </ul>

donc quand on clic sur

Code:

1
2
 
<img id="idimg" src="images/fleche_pg1.gif" onclick="changement_image('idimg','ul_lesobjects_sm');"/>

le système doit afficher et masquer le menu. mais quand on clic le système affiche e dépli le menu.

comment faire pour maintenir l 'état clicqué.

merci