Comment faire fonctionner ce script dans mon site ?

Version imprimable

Bonjour tout le monde,

J'ai trouvé ce script que j'aimerais intégrer à mon site :

http://www.learningjquery.com/2006/0...-show-and-hide

N'étant pas encore familiarisé avec jquery, je me demandais où je devais mettre ce 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
$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready (a little sooner that page load)
  $('#slickbox').hide();
 
 // shows and hides and toggles the slickbox on click  
  $('#slick-show').click(function() {
    $('#slickbox').show('slow');
    return false;
  });
  $('#slick-hide').click(function() {
    $('#slickbox').hide('fast');
    return false;
  });
  $('#slick-toggle').click(function() {
    $('#slickbox').toggle(400);
    return false;
  });
 
 // slides down, up, and toggle the slickbox on click    
  $('#slick-down').click(function() {
    $('#slickbox').slideDown('slow');
    return false;
  });
  $('#slick-up').click(function() {
    $('#slickbox').slideUp('fast');
    return false;
  });
  $('#slick-slidetoggle').click(function() {
    $('#slickbox').slideToggle(400);
    return false;
  });
});

La DIV à cacher s'appelle info_et.

J'aimerais enclencher l'effet sur l'évènement onclick d'une image que voici :

Code:

1
2
 
<img src="images/down-icon.png" alt="Cacher" width="32" height="32" style="display:inline"" />

Merci d'avance pour votre aide, je serais très heureux de pouvoir avoir ce joli effet sur mon site.

beegees

Bonjour beegees,

Ton code javascript doit se placé entre les balises <head></head> de ta page et après l'importation de la librairie JQuery.
Ton image doit avoir pour id slick-show, slick-hide, slick-slidetoggle, etc.... selon l'animation que souhaite faire.

Voici un exemple basique :

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
 
<html>
	<head>
 
		<script src="js/jquery.js" type="text/javascript"></script>
 
		<script type="text/javascript">
		$(document).ready(function() {
			// hides the slickbox as soon as the DOM is ready (a little sooner that page load)
			$('#info_et').hide();
 
			// shows and hides and toggles the slickbox on click  
			$('#slick-show').click(function() {
				$('#info_et').show('slow');
				return false;
			});
 
			$('#slick-hide').click(function() {
				$('#info_et').hide('fast');
				return false;
			});
 
			$('#slick-toggle').click(function() {
				$('#info_et').toggle(400);
				return false;
			});
 
			// slides down, up, and toggle the slickbox on click    
			$('#slick-down').click(function() {
				$('#info_et').slideDown('slow');
				return false;
			});
 
			$('#slick-up').click(function() {
				$('#info_et').slideUp('fast');
				return false;
			});
 
			$('#slick-slidetoggle').click(function() {
				$('#info_et').slideToggle(400);
				return false;
			});
		});
		</script>
	</head>
 
	<body>
		<div id="info_et">Mon contenu</div>
 
		<img src="images/down-icon.png" alt="Cacher" width="32" height="32" style="display:inline;" id="slick-slidetoggle" />
	</body>
</html>

Bon courage ;)

02/01/2010, 12h01
beegees

Bonjour Eclydia,

Merci pour ta réponse et bonne année.

J'ai fait tout ce que tu as dis, cela fonctionne plus ou moins.

Je t'explique :

1) j'ai changé :

Code:

$('#info_et').slideToggle(400);

par

Code:

$('.info_et').slideToggle(400);

car c'est une classe et pas un id.

2) J'ai essayé, ça a disparu, et ça n'apparaît plus :aie:, même après un refresh, même après avoir fermé ou réouvert le document.

Je vais devoir revoir la structure de mon document car je ne veux pas cacher tous le document mais une partie.

Tu me dire comment je peux faire réaparaître mon site stp ?

Encore merci.

beegees
02/01/2010, 20h16
Eclydia

Ah, a ce moment la si tu souhaite faire ça mais un :

Code:

$('.info_et').toggle(400);

:)

Bonsoir.

Un exemple, voir commentaires dans le 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
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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style type="text/css">
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
		div#affiche {
			margin:12px;
			border:1px solid #999999;
		}
 
		/* TEST */
		div#affiche img {
			width:32px;
			height:32px;
			border:1px dotted grey;
			margin:12px;
			padding:6px;
		}
		div.info_et {
			display:block;
		}
	</style>
	<script type="text/javascript" src="../lib/jquery-1.4a2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
 
			// montrer
			$('#slick-down').click(function() {
				$('.info_et').slideDown('slow');
				return false;
			});
 
			// cacher
			$('#slick-up').click(function() {
				$('.info_et').slideUp('fast');
				return false;
			});
 
			// cacher en cliquant sur la div.info_et
			$('.info_et').click(function() {
				$(this).slideToggle(400);
				return false;
			});
		});
	</script>	
</head>
<body>
	<div id="conteneur">		
		<div id="affiche">
 
			<!-- URL img non disponibles -->
			<img id="slick-down" src=" " alt="montrer" title="montrer" />
			<img id="slick-up" src=" " alt="cacher" title="cacher" />
 
			<div class="info_et">
				<p>
					Ut sagittis lobortis dolor. Sed aliquam velit. Nulla ultrices, nisi ut ultrices ullamcorper, arcu erat auctor ante, a malesuada elit enim vel neque. Cras imperdiet lacus non lectus. Nulla sodales, diam id fermentum pellentesque, dolor urna interdum quam, et lacinia turpis dui vitae diam. Integer ut mauris. Nam ligula. Morbi lobortis, lectus ut dictum elementum, justo tortor rutrum erat, nec fringilla eros nisi in nisl. Sed quis quam a est accumsan congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus tempor. Integer vestibulum, justo vel suscipit lacinia, erat urna aliquet nulla, ac malesuada nunc neque vitae dolor. Ut vel nisi. Vivamus urna ligula, molestie scelerisque, congue quis, venenatis non, urna. Praesent mi ipsum, vulputate ac, pharetra eu, interdum eu, urna. Nullam felis nunc, aliquet a, eleifend a, mollis id, nunc. Phasellus sodales. Aliquam consectetur leo non odio.
				</p>
				<p>
					Praesent egestas, ante sed sagittis fermentum, ligula nulla viverra tortor, at lacinia massa felis quis arcu. Mauris malesuada neque. Maecenas sed justo. Aliquam dui libero, consectetur at, iaculis eu, aliquam vitae, eros. Nullam lorem felis, iaculis eget, tincidunt eget, mollis ac, arcu. In pellentesque mauris eget quam. In non magna. Maecenas vulputate eleifend purus. Sed imperdiet malesuada augue. Sed dolor purus, faucibus non, elementum feugiat, condimentum et, elit. Vestibulum vitae felis.
				</p>
				<p>
					Sed porta. Sed non magna. Suspendisse ullamcorper pretium enim. Fusce iaculis vulputate lacus. Nulla facilisi. Etiam tincidunt dui ut erat. Donec non est. Maecenas sagittis, sem vitae dictum hendrerit, mi tellus ornare dolor, in euismod sapien diam a ante. Donec ullamcorper mollis lacus. Morbi sed arcu. Curabitur nec purus. Proin ut mauris. Quisque orci. Phasellus enim felis, faucibus in, placerat et, sagittis id, tellus. In eu sapien.
				</p>
				<p>
					Nam volutpat, felis vitae tempus malesuada, arcu mauris lobortis lorem, non pretium dui diam eu augue. Curabitur non nisi sed libero posuere feugiat. Vivamus luctus tristique nisl. Proin vel lectus. Nunc vitae leo eget arcu ultrices pretium. Integer cursus nisi. Nulla quis justo quis nibh hendrerit vulputate. Nam tristique, diam in egestas ullamcorper, sapien quam faucibus leo, id vehicula eros arcu id mi. Morbi neque justo, tempus in, luctus id, mattis sed, metus. Praesent tincidunt risus id lacus. Quisque vitae dolor. Morbi dignissim nibh nec elit. Morbi pulvinar ligula non velit. In hac habitasse platea dictumst. Etiam ornare tristique nibh. Donec consequat, ipsum id luctus commodo, ipsum lacus accumsan eros, ut viverra justo risus at justo. In turpis felis, mollis nec, bibendum ut, vehicula ac, velit. Donec pulvinar eleifend ligula. In tempor eros quis diam tincidunt fermentum. Fusce gravida ultricies metus.
				</p>
			</div>
		</div>
	</div>
</body>  
</html>