Menu ouvrable et réductible

Bonjour,


Je suis entrein d'adapter un code que j'ai trouvé sur codes-sources pour faire un menu qui convient à ce que je veux. Le code que j'ai trouvé permet de faire un menu déroulant composé de plusieurs tables. Dans mon cas je voudrais faire pareil : 6 tables ( assimilés à des boites) où on voit à priori que les titre et au lieu de voir les sous menus en déroulant la souris ('mouseover') , on les vois en cliquant sur un bouton + à droite du titre par exemple. (Des boites qui s'ouvrent et qui se réduisent). 

Il faut donc que je change ma ligne 25 et que je mette mon bouton cliquable, vous pouvez m'aider?

1. function initmenu(){
3.     var browser = navigator.userAgent;
4.     browser = browser.toLowerCase();
5.     browser = browser.split('/');
6.     var version = browser[1].split('.');
7.        
8.     var menu = document.getElementById('menu');
9.     var lis = menu.getElementsByTagName('li');
10.     var uls = menu.getElementsByTagName('ul');
11.    
12.     for ( var i=0; i<lis.length; i++){
13.    
14.         var ul = lis.item(i).getElementsByTagName('ul');
15.        
16.         if ( ul.item(0) ){
17.             /* for Internet Explorer and Opera6 */
18.             if ( document.all && browser[0]!='opera' || browser[0]=='opera' && version[0]<7 ){
19.              //lis.item(i).onmouseover = allume;
20.                 lis.item(i).onmouseover = visible;
21.                 lis.item(i).onmouseout = hidden;
22.                 lis.item(i).onkeyup = visible;
23.             /* for Browser */
24.             }elseif( document.getElementById ){
25.                 lis.item(i).addEventListener("mouseover",visible,true);
26.                 lis.item(i).addEventListener("mouseout",hidden,true);
27.                 lis.item(i).addEventListener("blur",hidden,true);
28.                 lis.item(i).addEventListener("focus",visible,true);
29.                 }
30.             }
31.         }
32.     }