débutant, effet slideToggle

**Balthazar117** · 22/03/2010, 11h35

Bonjour à tous, je débute en jquery et javascript et j'ai écris ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
for($i = 1; $i <= 10; $i++)
{
        echo"<script>
        $(document).ready(function(){
        $('.bloc".$i."').hide();
        $('.titre".$i."').toggle(function(){
        $(this).addClass('active');
        }, function(){
        $(this).removeClass('active');
        });
        $('.titre".$i."').click(function(){
        $(this).next().toggle('normal');
        });
        });
        </script>";
}
?>

et dans mon body :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div>
<a href="#" class="titre1">1 - Effet toggle</a>
<div class="bloc1">test toggle !</div>
</div>
<br>
<div>
<a href="#" class="titre2">2 - Effet toggle</a>
<div class="bloc2">test toggle !</div>
</div>

Cela fonctionne très bien seulement je souhaiterai que lorsque je clic sur un titre, il se déroule mais qu'il fasse se enrouler tous ceux qui sont ouverts.
Quelqu'un peut me lancer une piste svp ?

**danielhagnoul** · 22/03/2010, 21h35

Bonsoir.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
114
115
116
117
118
119
120
121
122
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family: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;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		div.bloc {
			width:100px;
			height:20px;
			margin:6px;
		}
	</style>
	<script charset="CP-1252" src="../lib/jquery-1.4.2.min.js"></script>
	<script>
		$(function(){
			/*
				jQuery est une bibliothèque JavaScript,
				vous devez donner le code affiché
				dans votre navigateur et non le code PHP !
 
				Considérant votre statut de débutant
				et ma bonne humeur du moment
				j'accepte de vous dire que votre PHP est mal formé !
 
				Il est inutile de numéroter les blocs.
			*/
 
			$('.bloc').hide();
 
			$('.titre').click(function(){
				var self = this;
 
				$('.titre').each(function(i, item){
					if ($(item).hasClass('active')){
						$(item).removeClass("active");
						$(item).next(".bloc").slideToggle("normal");
					}
 
					if (item === self){
						$(item).addClass("active");
						$(item).next(".bloc").slideToggle("normal");
					}
				});
			});
 
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<div>
			<a href="#" class="titre">1 - Effet toggle</a>
			<div class="bloc">test toggle !</div>
		</div>
		<div>
			<a href="#" class="titre">2 - Effet toggle</a>
			<div class="bloc">test toggle !</div>
		</div>
		<div>
			<a href="#" class="titre">3 - Effet toggle</a>
			<div class="bloc">test toggle !</div>
		</div>
		<div>
			<a href="#" class="titre">4 - Effet toggle</a>
			<div class="bloc">test toggle !</div>
		</div>
		<div>
			<a href="#" class="titre">5 - Effet toggle</a>
			<div class="bloc">test toggle !</div>
		</div>
 
	</div>
</body>  
</html>

débutant, effet slideToggle

jQuery

Vue hybride

Discussions similaires

Partager

Partager