11548 sujets

JavaScript, DOM et API Web HTML5

[jQuery] toggleClass sur plusieurs éléments

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.

JS
 
<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>


HTML

 
 <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>


CSS

 
.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;
}
C'est bon je viens de réussir tout seul comme un grand, après 2 jours de recherche...
voilà le javaScript pour ceux qui un jour se poserai la même question que moi.


<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>
Sujet clos
Aller à