toggleClass sur plusieurs éléments

**ghjiseppu** · 27/09/2012, 10h35

Bonjour,

Mon cas est le suivant :
J'ai une page où je souhaites afficher des contenus différents avec des liens très simples.

Par exemple lorsque je clique sur le lien A j'affiche le contenu A et si je clique à nouveau sur le lien A le contenu A disparaît, tout ça avec des transitions CSS. A ce niveau là aucun problème avec la fonction toggleClass ça marche c'est ok.
Mon problème intervient en fait avec le deuxième contenu. J'ai un lien B et un contenu B je voudrai que lorsque je clique sur le lien B, si le contenu A est affiché, faire disparaître le contenu A puis afficher le contenu B, si le contenu A n'est pas affiché juste afficher le contenu B et si le contenu B est affiché fermer le contenu B.

J'espère être assez explicite, et que quelqu'un pourra me donner une réponse.
Voilà ce que j'ai déjà fait, mais ça ne fonctionne pas comme je veux.

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
 
<script type="text/javascript">
 
		var etatunique = 1;
		var etatuniqu = 1;
		var etatcontact = 1;
		var etatcontac = 1;
 
		//UNIQUE
		$("#ouvreBU").click(function(){	
			etatunique++;		
			etatuniqu++;	
			$("#boiteUnique").toggleClass("uniqueopen", etatunique % 2 == 0);	
			$("#contentUnique").toggleClass("uniqueopen2", etatuniqu % 2 == 0);
		});
 
		//CONTACT		
		$("#ouvreBC").click(function(){
			if(etatunique){
				//FERMER BOITE UNIQUE		
				etatunique++;			
				etatuniqu++;				
				$("#boiteUnique").removeClass("uniqueopen");	
				$("#contentUnique").removeClass("uniqueopen2");
				setTimeout(function(){
					//OUVRIR BOITE CONTACT	
					etatcontact++;	
					etatcontac++;	
					$("#boiteContact").toogleClass("contactopen");	
					$("#contentContact").toogleClass("contactopen2");
				},2000);					
			}
			else{
				//OUVRIR ET FERMER BOITE CONTACT		
				etatcontact++;	
				etatcontac++;	
				$("#boiteContact").toogleClass("contactopen", etatcontact % 2 == 0);	
				$("#contentContact").toogleClass("contactopen2", etatcontac % 2 == 0);
			}
 
		});
 
	</script>

Merci.

**danielhagnoul** · 27/09/2012, 11h16

Bonjour

Sans les codes (HTML, CSS) pour tester le problème...

**ghjiseppu** · 27/09/2012, 12h04

Pardon

le html

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
 
 <div class="boiteMenu" style="margin:470px 0px 0px 0px;">
            	<span style="margin:50px 0px 0px 0px;" id="ouvreBU">Unique</span>
            </div>
 
            <div id="boiteUnique">
            	<div id="contentUnique">
                	<h2>A perfezzione dapoi lu 1908</h2>
                    <p>
                    Depuis 2006, eggersmann a fait de l’idée une réalité : fabriquer et toujours renouveler une collection de cuisines et d’équipements dont l’intemporalité et le minimalisme soient difficilement égalables. Et le nom UNIQUE parle de lui-même. L’accent est mis sur l’individualité ainsi que sur des matériaux exceptionnels et prestigieux. L’homogénéité de toutes les surfaces concernées est un principe fondamental de ce système. Ainsi, les surfaces frontales et latérales, de même que les éléments de préhension et les surfaces de travail sont tous en un seul et même matériau. En plus du CORIAN®, diverses variétés de pierre et de granit peuvent être utilisées, de même que des pierres composites. En outre, des détails complexes tels que des joints d’onglet sont utilisés sur les façades et les parties latérales.
                    </p>
            		<img src="resources/images/logoUnique.png" alt="logo Unique" />
                </div>
            </div>
 
            <div id="boiteContact">
            	<div id="contentContact">
                    <p>
                    Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
 
            <div class="boiteMenu" style="float:right; margin:470px 0px 0px 0px;">
            	<span style="margin:50px 0px 0px 0px;" id="ouvreBC">Cuntatti</span>
            </div>

et le css

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
 
.boiteMenu{
	display:			block;
	float:				left;
	width:				120px;
	height:				120px;
	margin:				0px;
	padding:			0px;
	background:			#111;
}
.boiteMenu span{
	display:			block;
	margin:				40px auto 0px auto;
	padding:			0px;
	color:				#fff;
	font-size:			20px;
	text-align:			center;
	text-decoration:	none;
	text-transform:		uppercase;
	cursor:				pointer;
}
 
#boiteUnique{
	display:			block;
	float:				left;
	width:				0px;
	height:				70px;
	margin:				470px 0px 0px 0px;
	padding:			0px;
	background:			url(../images/blackAlpha80.png) left top repeat;
	transition:			width 1s ease 1s, height 1s ease, margin 1s ease;
	-webkit-transition:	width 1s ease 1s, height 1s ease, margin 1s ease;
	-o-transition:		width 1s ease 1s, height 1s ease, margin 1s ease;
	-moz-transition:	width 1s ease 1s, height 1s ease, margin 1s ease;
}
#boiteUnique.uniqueopen{
	overflow:			hidden;
	width:				740px;
	height:				530px;
	margin:				0px;
	transition:			width 1s ease, height 1s ease 1s, margin 1s ease 1s;
	-webkit-transition:	width 1s ease, height 1s ease 1s, margin 1s ease 1s;
	-o-transition:		width 1s ease, height 1s ease 1s, margin 1s ease 1s;
	-moz-transition:	width 1s ease, height 1s ease 1s, margin 1s ease 1s;
}
#contentUnique{
	overflow:			hidden;
	width:				700px;
	height:				0px;
	margin:				0px;
	padding:			0px;
	transition:			height 1s ease, padding 1s ease;
	-webkit-transition:	height 1s ease, padding 1s ease;
	-o-transition:		height 1s ease, padding 1s ease;
	-moz-transition:	height 1s ease, padding 1s ease;
}
#contentUnique.uniqueopen2{
	height:				490px;
	padding:			20px;
	transition:			height 1s ease, padding 1s ease;
	-webkit-transition:	height 1s ease, padding 1s ease;
	-o-transition:		height 1s ease, padding 1s ease;
	-moz-transition:	height 1s ease, padding 1s ease;
}
 
#boiteContact{
	display:			block;
	float:				left;
	width:				0px;
	height:				70px;
	margin:				470px 0px 0px 0px;
	padding:			0px;
	background:			url(../images/blackAlpha80.png) left top repeat;
	transition:			width 1s ease 1s, height 1s ease, margin 1s ease;
	-webkit-transition:	width 1s ease 1s, height 1s ease, margin 1s ease;
	-o-transition:		width 1s ease 1s, height 1s ease, margin 1s ease;
	-moz-transition:	width 1s ease 1s, height 1s ease, margin 1s ease;
}
#boiteContact.contactopen{
	overflow:			hidden;
	width:				740px;
	height:				530px;
	margin:				0px;
	transition:			width 1s ease, height 1s ease 1s, margin 1s ease 1s;
	-webkit-transition:	width 1s ease, height 1s ease 1s, margin 1s ease 1s;
	-o-transition:		width 1s ease, height 1s ease 1s, margin 1s ease 1s;
	-moz-transition:	width 1s ease, height 1s ease 1s, margin 1s ease 1s;
}
#contentContact{
	overflow:			hidden;
	width:				700px;
	height:				0px;
	margin:				0px;
	padding:			0px;
	transition:			height 1s ease, padding 1s ease;
	-webkit-transition:	height 1s ease, padding 1s ease;
	-o-transition:		height 1s ease, padding 1s ease;
	-moz-transition:	height 1s ease, padding 1s ease;
}
#contentContact.contactopen2{
	height:				490px;
	padding:			20px;
	transition:			height 1s ease, padding 1s ease;
	-webkit-transition:	height 1s ease, padding 1s ease;
	-o-transition:		height 1s ease, padding 1s ease;
	-moz-transition:	height 1s ease, padding 1s ease;
}

**ghjiseppu** · 27/09/2012, 17h26

J'y suis finalement parvenu voilà la solution, au cas où quelqu'un serai dans le même cas que moi.

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
 
<script type="text/javascript">
 
		var etatunique = 1;
		var etatcontact = 1;
 
		//UNIQUE
		$("#ouvreBU").click(function(){				
			if(etatcontact % 2 == 0){
				//FERMER BOITE CONTACT
				$("#boiteContact").toggleClass("contactopen");	
				$("#contentContact").toggleClass("contactopen2");
				etatcontact++;			
				setTimeout(function(){
					//OUVRIR BOITE UNIQUE		
					$("#boiteUnique").toggleClass("uniqueopen");	
					$("#contentUnique").toggleClass("uniqueopen2");
					etatunique++;
				},2000);					
			}else{
				//OUVRIR ET FERMER BOITE UNIQUE		
				$("#boiteUnique").toggleClass("uniqueopen");	
				$("#contentUnique").toggleClass("uniqueopen2");
				etatunique++;	
			}
		});
 
		//CONTACT		
		$("#ouvreBC").click(function(){
			if(etatunique % 2 == 0){
				//FERMER BOITE UNIQUE			
				$("#boiteUnique").toggleClass("uniqueopen");	
				$("#contentUnique").toggleClass("uniqueopen2");		
				etatunique++;		
				setTimeout(function(){
					//OUVRIR BOITE CONTACT	
					$("#boiteContact").toggleClass("contactopen");	
					$("#contentContact").toggleClass("contactopen2");
					etatcontact++;		
				},2000);					
			}else{
				//OUVRIR ET FERMER BOITE CONTACT
				$("#boiteContact").toggleClass("contactopen");	
				$("#contentContact").toggleClass("contactopen2");
				etatcontact++;		
			}			
		});
 
	</script>

toggleClass sur plusieurs éléments

jQuery

Discussions similaires

Partager

Partager