Slide toggle - Scriptaculous ou Jquery ?

Version imprimable

18/12/2008, 08h25
pierre50

Slide toggle - Scriptaculous ou Jquery ?

Pour faire un effet de slide toggle (affichage d'une div qui repousse plus pas le contenu dejà affiché, j'ai utilisé la librairie scriptaculous

Je viens de découvrir jquery

Lequel vous semble le plus optimisé en terme de ressource ?

Juste pour faire un slide toggle ? Pas besoin de scriptaculous ni de jQuery, ça se code facilement sans ajouter des montagnes de scripts.
Du reste, j'avais déjà proposé un exemple de ce genre de 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
var restaure;
var pas;
window.onload=function(){
	var elem = document.getElementById('bloc');
	var elemt = document.getElementById('lien');
	restaure = elem.offsetHeight;
	elem.style.height='0px';
	elem.style.overflow='hidden';
	elem.style.display='none';
	elemt.style.cursor='pointer';
	pas = restaure/50;
	elemt.onmouseover = function(){elemt.style.color='red'}
	elemt.onmouseout = function(){elemt.style.color=''}
	elemt.onclick = function(){swap('bloc')}
}
function swap(elmt){
	elt=document.getElementById(elmt);
	if(elt.style.display=='none'){
		var taille = restaure;
		elt.style.display = '';
		var timer = setInterval(function(){
			if(taille>elt.offsetHeight){elt.style.height=(elt.offsetHeight+pas)+'px'}
			else{elt.style.height='auto';clearInterval(timer)}
		},1);
	}
	else{
		var taille = elt.offsetHeight;
		restaure = taille;
		elt.style.overflow='hidden';
		var timer = setInterval(function(){
			if(taille>=pas){elt.style.height=taille+'px';taille-=pas;}
			else{elt.style.display='none';clearInterval(timer)}
		},1);
	}
}

'bloc' étant l'élément qui apparait / disparait ;
'lien' le lien qui fait basculer l'affichage.

Merci pour le script
Mais soit d1 la zone div à afficher masquer
et lien_d1 pour declencher l'action
je ne vois pas comment passer ce dernier paramètre

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
 
<body>
Introduction
<div >
<a href="#" >Afficher - Masquer la zone d1</a>
</div>
 
<div id="d1"  >
     Zone d1
</div>
Reste du texte
 
<script language="JavaScript" type="text/JavaScript" >
				var restaure;
var pas;
window.onload=function(){
	var elem = document.getElementById('d1');
	var elemt = document.getElementById('lien_d1');
	restaure = elem.offsetHeight;
	elem.style.height='0px';
	elem.style.overflow='hidden';
	elem.style.display='none';
	elemt.style.cursor='pointer';
	pas = restaure/50;
	elemt.onmouseover = function(){elemt.style.color='red'}
	elemt.onmouseout = function(){elemt.style.color=''}
	elemt.onclick = function(){swap('bloc')}
}
function swap(elemt){
	elt=document.getElementById(elemt);
	if(elt.style.display=='none'){
		var taille = restaure;
		elt.style.display = '';
		var timer = setInterval(function(){
			if(taille>elt.offsetHeight){elt.style.height=(elt.offsetHeight+pas)+'px'}
			else{elt.style.height='auto';clearInterval(timer)}
		},1);
	}
	else{
		var taille = elt.offsetHeight;
		restaure = taille;
		elt.style.overflow='hidden';
		var timer = setInterval(function(){
			if(taille>=pas){elt.style.height=taille+'px';taille-=pas;}
			else{elt.style.display='none';clearInterval(timer)}
		},1);
	}
}</script>				
</body>

23/12/2008, 11h54
Macmillenium
Citation:

Envoyé par pierre50

Merci pour le script
Mais soit d1 la zone div à afficher masquer
et lien_d1 pour declencher l'action
je ne vois pas comment passer ce dernier paramètre
Code:

1 2 3 4 5 6 7 8 <div > <a href="#" id="lien_d1">Afficher - Masquer la zone d1</a> </div> <div id="d1" > Zone d1 </div>
???

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
<head>
<script language="JavaScript" type="text/JavaScript" >
				var restaure;
var pas;
window.onload=function(){
	var elem = document.getElementById('d1');
	var elemt = document.getElementById('lien_d1');
	restaure = elem.offsetHeight;
	elem.style.height='0px';
	elem.style.overflow='hidden';
	elem.style.display='none';
	elemt.style.cursor='pointer';
	pas = restaure/50;
	elemt.onmouseover = function(){elemt.style.color='red'}
	elemt.onmouseout = function(){elemt.style.color=''}
	elemt.onclick = function(){swap(elem); return false}
}
function swap(elemt){
	elt=document.getElementById(elemt);
	if(elt.style.display=='none'){
		var taille = restaure;
		elt.style.display = '';
		var timer = setInterval(function(){
			if(taille>elt.offsetHeight){elt.style.height=(elt.offsetHeight+pas)+'px'}
			else{elt.style.height='auto';clearInterval(timer)}
		},1);
	}
	else{
		var taille = elt.offsetHeight;
		restaure = taille;
		elt.style.overflow='hidden';
		var timer = setInterval(function(){
			if(taille>=pas){elt.style.height=taille+'px';taille-=pas;}
			else{elt.style.display='none';clearInterval(timer)}
		},1);
	}
}</script>	
</head>
<body>
Introduction
<div >
<a href="#" id="lien_d1">Afficher - Masquer la zone d1</a>
</div>
 
<div id="d1"  >
     Zone d1
</div>
Reste du texte
 
			
</body>