Menu accordéon - garder catégorie ouverte

Version imprimable

Bonjour a tous,

J'ai trouvé sur ce site un script de menu en accordéon. Il est quasi parfait si ce n'est que j'aimerais pouvoir garder une catégorie ouverte.

Voici le code de la page:

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			#menuAcc li{
				border:1px solid #666;
				width:150px;
				height:13px;
				overflow:hidden;
				padding:0px;
			}
			#menuAcc li h6{
				padding:0px;
				margin:0px;
			}
		</style>
		<script type="text/javascript">
			var ulCurrent = null;
			var animTimerOpen = null;
			var animTimerClose = null;
			var quotient = 0.2;
			var isOpen = null;
			var IsMinHeight = true;
 
			function openMenu(element){
				ulCurrent = element.parentNode;
				var heightLink = element.offsetHeight;
				var heightDiv = element.parentNode.getElementsByTagName('div')[0].offsetHeight;
				animTimerOpen = setInterval(function(){
					Expand(heightDiv+heightLink,heightLink)
					}, 25);
				}
 
 
			function Expand(MaxHeight,minHeight){
				var IsMaxHeight = false;
				if(parseInt(ulCurrent.offsetHeight)< MaxHeight){
					ulCurrent.style.height = parseInt(ulCurrent.offsetHeight) + 5 + 'px'; 
				}
				else if(!IsMaxHeight){
					IsMaxHeight = true;
				}
 
				if (isOpen != null) {
					if (parseInt(isOpen.offsetHeight) > minHeight) {
						IsMinHeight = false;
						isOpen.style.height = parseInt(isOpen.offsetHeight) - 9 + 'px';
					}
					else 
						if (!IsMinHeight) {
							IsMinHeight = true;
					}
				}
				if(IsMaxHeight && IsMinHeight){
					clearInterval(animTimerOpen);
					ulCurrent.style.height = MaxHeight + "px";
					if (isOpen != null) {
						isOpen.style.height = minHeight + 2 + "px";
					}
					isOpen = ulCurrent;
					quotient = 0.2 ;
				}
			}
		</script>
	</head>
	<body>
		<ul id="menuAcc">
			<li><h6 onclick="openMenu(this);">menu 1</h6>
				<div>et la tout le contenu <br />
	  				 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
 
				</div>
			</li>
			<li><h6 onclick="openMenu(this);">menu 1</h6>
				<div>et la tout le contenu <br />
	  				 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
				</div>
			</li>
			<li><h6 onclick="openMenu(this);">menu 1</h6>
				<div>et la tout le contenu <br />
	  				 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
				</div>
			</li>
			<li><h6 onclick="openMenu(this);">menu 1</h6>
				<div>et la tout le contenu <br />
	  				 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
				</div>
			</li>
			<li><h6 onclick="openMenu(this);">menu 1</h6>
				<div>et la tout le contenu <br />
	  				 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
				</div>
			</li>			
		</ul>
	</body>
</html>

J'ai essayé en ajoutant un ID dans les balises h6 puis en faisant l'appel suivant:

Code:

1
2
3
<script language="javascript">
openMenu(document.getElementByID(idPartie));
</script>;

mais cela ne fonctionne pas. Quelqu'un saurait il comment faire svp?

Merci a tous

Code:

1
2
3
4
5
6
7
 
window.addEventListener(
     "load",
      function (){
	    openMenu(document.getElementById("idPartie"));
      },
      false);

et voila...

olivier.

01/06/2009, 10h25
yozart

Merci beaucoup pour ton aide. Je ne connaissais pas cette fonction. je vais l'essayer de suite ^^.

EDIT: ca marche pafaitement. mille fois merci a toi ôh grand maitre du javascript.
01/06/2009, 12h08
Bovino

Attention... addEventListener n'est pas cross-browser, pour IE, il faut passer par attachEvent !
01/06/2009, 12h16
olivierPa

Ah... IE, il ne peut jamais rien faire comme tout le monde !
Merci pour la precision (en general j'utilise plus .onload=...), mais je voulais proposer une solution "propre". C'etait compter sans IE...

Bon, désolé de rouvrir le post mais en fait, un petit bug subsiste dans le script. lorsqu'on clic plusieurs fois sur une categorie, les autres se referment plus vite et des elements des categories restent cachés lors de l'ouverture d'une categorie. Ce qui est assez génant. Je ne trouve pas d'ou viens le problème malheureusement....

voici le code js utilisé:

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
44
45
46
var ulCurrent = null;
var animTimerOpen = null;
var animTimerClose = null;
var quotient = 0.2;
var isOpen = null;
var IsMinHeight = true;
 
function openMenu(element){
	ulCurrent = element.parentNode;
	var heightLink = element.offsetHeight;
	var heightDiv = element.parentNode.getElementsByTagName('div')[0].offsetHeight;
	animTimerOpen = setInterval(function(){
		Expand(heightDiv+heightLink+5,heightLink)
		}, 25);
	}
 
 
function Expand(MaxHeight,minHeight){
	var IsMaxHeight = false;
	if(parseInt(ulCurrent.offsetHeight)< MaxHeight){
		ulCurrent.style.height = parseInt(ulCurrent.offsetHeight) + 5 + 'px'; 
	}
	else if(!IsMaxHeight){
		IsMaxHeight = true;
	}
 
	if (isOpen != null) {
		if (parseInt(isOpen.offsetHeight) > minHeight) {
			IsMinHeight = false;
			isOpen.style.height = parseInt(isOpen.offsetHeight) - 5 + 'px';
		}
		else 
			if (!IsMinHeight) {
				IsMinHeight = true;
		}
	}
	if(IsMaxHeight && IsMinHeight){
		clearInterval(animTimerOpen);
		ulCurrent.style.height = MaxHeight + "px";
		if (isOpen != null) {
			isOpen.style.height = minHeight + 2 + "px";
		}
		isOpen = ulCurrent;
		quotient = 0.2 ;
	}
}

12/06/2009, 09h03
le_chomeur

salut ^^
je découvre qu'il s'agissait de mon script en fait :p

je te propose cette version : http://mbox.tuxfamily.org/accordeon/

beaucoup améliorée ...
12/06/2009, 10h44
yozart

Merci, malheureusement, utilisant ce script pour un projet dont il me reste 2 jours pour le rendre, je me vois mal changer le script. J'ai vu hier ton nouveau script. Mais je ne peux le remplacer car les changements sont trop importants. Aurait tu juste une petite correction pour ce script la? Sinon tant pis, je prierais pour que le prof ne s'amuse pas à cliquer plein de fois sur les catégories...

voici une rustine ;)

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
44
45
46
47
48
49
50
51
 
		<script type="text/javascript">
			var ulCurrent = null;
			var animTimerOpen = null;
			var animTimerClose = null;
			var quotient = 0.2;
			var isOpen = null;
			var IsMinHeight = true;
 
			function openMenu(element){
				if(ulCurrent == null && ( isOpen != element.parentNode )){
					ulCurrent = element.parentNode;
					var heightLink = element.offsetHeight;
					var heightDiv = element.parentNode.getElementsByTagName('div')[0].offsetHeight;
					animTimerOpen = setInterval(function(){
						Expand(heightDiv+heightLink,heightLink)
						}, 25);
					}
				}
 
 
			function Expand(MaxHeight,minHeight){
				var IsMaxHeight = false;
				if(parseInt(ulCurrent.offsetHeight)< MaxHeight){
					ulCurrent.style.height = parseInt(ulCurrent.offsetHeight) + 5 + 'px'; 
				}
				else if(!IsMaxHeight){
					IsMaxHeight = true;
				}
 
				if (isOpen != null) {
					if (parseInt(isOpen.offsetHeight) > minHeight) {
						IsMinHeight = false;
						isOpen.style.height = parseInt(isOpen.offsetHeight) - 9 + 'px';
					}
					else 
						if (!IsMinHeight) {
							IsMinHeight = true;
					}
				}
				if(IsMaxHeight && IsMinHeight){
					clearInterval(animTimerOpen);
					ulCurrent.style.height = MaxHeight + "px";
					if (isOpen != null) {
						isOpen.style.height = minHeight + 2 + "px";
					}
					isOpen = ulCurrent;
					quotient = 0.2 ;
					ulCurrent = null;
				}
			}