Fonction afficher/cacher un div, cacher les autres.

Résolu/Fermé

Javascript

Tunis - 10 janv. 2013 à 15:35
Un webmaster... - 26 sept. 2014 à 18:03

Bonjour,

Apres avoir passez plusieurs heures sur le net a la recherche d'exemple de code fonctionnant pour ma tache ( a savoir afficher/cacher des div selon les choix du visiteur) j'en viens a poster mon bout de code ici en espérant trouver une âme charitable qui pourra m'expliquer pourquoi ça ne marche pas ^^.

function toggleDiv(TypeDiv, Numero, TotalNB){
	var div = TypeDiv+Numero;
	for(i = 1; i <= TotalNB; i++) {
		if(document.getElementById(TypeDiv+i) == document.getElementById(div)) {
			var DivClic = document.getElementById(div).style; 
			DivClic.display=styl.display == "none"?"block":"none";
		}
		else {
			var AutreDiv=document.getElementById(TypeDiv+i).style; 
			AutreDiv.display="none"; 
		}
	}
}

donc voila la fameuse fonction, je me suis inspiré d'une fonction toute simple qui permet d'afficher toutes les div et j'ai essayer de la modifier pour avoir le résultat voulu.

donc j'envoi a la fonction le type de div, a savoir le nom de l'id
j'envoi le numéro de la div,
et le nombre total de div de ce type la.
je crée la variable div pour dire quelle div a été choisi par le visiteur et donc je l'affiche ou la masque selon le status actuel.
si ce n'est pas celle sélectionné, je masque simplement.

voici le code html :

<a href="#" onclick="toggleDiv('champion', '1', '3');" >champion 1</a><br  />
<a href="#" onclick="toggleDiv('champion', '2', '3');" >champion 2</a><br  />
<a href="#" onclick="toggleDiv('champion', '3', '3');" >champion 3</a><br  />
<div id="champion1" style="display:none">c moche 1</div>
<div id="champion2" style="display:none">c moche 2</div>
<div id="champion3" style="display:none">c moche 3</div>

bien sur la c'est du code tout moche mais le but final sera d'avoir une liste d'image différente selon les choix avec pour chaque image les résultat de la requête sql sur cette image.

j'ai essayer sans les "", sans les '', rien ne marche donc le problème doit venir de la fonction elle même seulement je ne m'y connais pas assez en js pour réussir a voir ou l'erreur est et c'est pourquoi je viens demander de l'aide :).

je pense bien que le problème doit venir de mon if mais je ne vois pas comment le changer autrement.

Merci d'avance a ceux qui m'aiderons !

Tunis

Ps : pour ceux intéressé voici la fonction qui me sert de base :

function disp(calque){ 
	var i = 1; 
	while ( document.getElementById(calque+i) != null ){ 
		var styl = document.getElementById(calque+i).style; 
		styl.display = styl.display == "none"?"block":"none"; 
		i++; 
	} 
}

A voir également:

Afficher/masquer div javascript onclick
Masquer conversation whatsapp - Guide
Telecharger javascript - Télécharger - Langages
Afficher mot de passe wifi android - Guide
Afficher toutes les lignes masquées excel ✓ - Forum Excel
Appel masquer - Guide

6 réponses

Réponse 1 / 6

Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
Modifié par Nhay le 10/01/2013 à 15:57

Je t'ai corriger ta fonction :D

<script>function toggleDiv(TypeDiv, Numero, TotalNB){ 
 var div = TypeDiv+Numero; 
 for(i = 1; i <= TotalNB; i++) { 
  if(document.getElementById(TypeDiv+i) == document.getElementById(div)) { 
   var DivClic = document.getElementById(div).style;  
   (DivClic.display == "none") ? DivClic.display="block":DivClic.display="none"; 
  } 
  else { 
   var AutreDiv=document.getElementById(TypeDiv+i).style;  
   AutreDiv.display="none";  
  } 
 } 
} 
</script>

Erreur 1, tu avais styl au lieu de style
Erreur 2, ton opérateur ternaire n'étais pas complet.

Réponse 3 / 6

Tunis
Modifié par Tunis le 10/01/2013 à 16:06

Woah !

Merci beaucoup effectivement ça marche niquel maintenant :p

Ça m'apprendra a essayer de bidouiller du code sans connaitre les bonnes syntaxe ^^

les erreurs a la con en plus ^^

Encore merci pour ta réponse rapide :)

Tunis

dez
16 janv. 2013 à 19:17

Salut !

Je peux avoir une rapide explication du code?

merci !

Tunis
16 janv. 2013 à 19:56

biensur,

toggleDiv('TypeDiv', 'Numero', 'TotalNB');

ça c'est pour l'appel de la fonction qui masque/affiche les div

ensuite la fonction en elle même :

function toggleDiv(TypeDiv, Numero, TotalNB)

donc on a :
TypeDiv : en gros c'est le nom du groupe de div. (permet d'avoir plusieurs groupe a afficher/masquer)
Numero : le numéro du div. (pour savoir lequel est sélectionner par le visiteur)
TotalNB : le nombre total de div de ce type afin de pouvoir les fermer tous.

var div = TypeDiv+Numero; 
 for(i = 1; i <= TotalNB; i++)

ici on défini la div choisi dans la variable div.
et on fait une boucle for sur le nombre total de div.

if(document.getElementById(TypeDiv+i) == document.getElementById(div))

ici on regarde si la boucle actuelle est sur la div choisi par le visiteur.

var DivClic = document.getElementById(div).style;

on défini la variable pour rendre la prochaine ligne plus lisible :p

(DivClic.display == "none") ? DivClic.display="block":DivClic.display="none";

ici on regarde si la div est masquer ou pas et on change son status. (c'est un if/else tout simple tu peux le retaper dans la forme if() {} else {} (ou le else correspond au ':' )

else { 
   var AutreDiv=document.getElementById(TypeDiv+i).style;  
   AutreDiv.display="none";

ici c'est tout simple, si on a pas la div choisi par le visiteur on met le style en none pour cacher :)

voila pour la fonction en elle même :)

un petit exemple :

voila la div.

<div id="champion_<?php echo $d; ?>" style="display:none">

et le lien pour l'afficher/masquer :

<a href="#stat_champion" onclick="toggleDiv('champion_', '<?php echo $b; ?>', '<?php echo $c; ?>');" >

ça permet aussi d'imbriquer les div a afficher/masquer.

le mieux pour s'en rendre compte et de tester l'imbriquation. ;)
du genre

<div id"type1">
  <div id="type1_1"></div>
</div>
<div id"type2">
  <div id="type2_1"></div>
</div>

Voila j'espère que ça t'aidera a comprendre un peux mieux :)

Bonne soirée !

dez
17 janv. 2013 à 21:18

waa super merci beaucoup !

je me penche dessus!

bonne soirée

Réponse 5 / 6

dassyka
15 févr. 2013 à 01:35

Alors Tunis, je vais essayer de vous mettre mon code pour que vous puissiez voir et m'aider mais aussi, voici le site en question : http://www.societe-historique-rdp.org et c'est dans la section albums photos que ce trouve mon problème...

Voici mon code...

la fonction que j'ai mis dans ma page:

<script>function toggleDiv(TypeDiv, Numero, TotalNB){ 
 var div = TypeDiv+Numero; 
 for(i = 1; i <= TotalNB; i++) { 
  if(document.getElementById(TypeDiv+i) == document.getElementById(div)) { 
   var DivClic = document.getElementById(div).style;  
   (DivClic.display == "none") ? DivClic.display="block":DivClic.display="none"; 
  } 
  else { 
   var AutreDiv=document.getElementById(TypeDiv+i).style;  
   AutreDiv.display="none";  
  } 
 } 
} 
</script>

voici la partie de mon code html dans ma page...

<!--Div pour les albums de la catégorie sorties-->
<div id="albums">
<p>Albums:</p>
<a href="#" onclick="toggleDiv('sorties', '1', '2');" ><p>Trois-Rivières 2011</p></a><br  />
<a href="#" onclick="toggleDiv('sorties', '2', '2');" ><p>Vieux Montréal 2012</p></a><br  />
</div>

<!--Divs pour les photos de l'album-->

<div id="sorties1">
<p class="sorties1">Trois-Rivières 2011</p> <br/>


<a href="images/albums photos/sorties/trois-rivieres-2011/groupe.jpg" rel="lightbox[trois-rivieres]" data-lbtitle="Le groupe">
<img src="images/albums photos/sorties/trois-rivieres-2011/groupe.jpg" width="125px" border="5px" />
</a>
   
<a href="images/albums photos/sorties/trois-rivieres-2011/maquette.jpg" rel="lightbox[trois-rivieres]" data-lbtitle="La maquette" >
<img src="images/albums photos/sorties/trois-rivieres-2011/maquette.jpg" width="125px" border="5px" />
</a>

</div>

<div id="sorties2">
<p class="sorties2">Vieux Montréal 2012</p> <br/>
<a href="images/albums photos/sorties/vieux-montreal/groupe.jpg" rel="lightbox[vieux-montreal]" title="Le groupe" data-lbtitle="Le groupe">
<img src="images/albums photos/sorties/vieux-montreal/groupe.jpg" width="125px" border="5px" />
</a>
   
<a href="images/albums photos/sorties/vieux-montreal/centre-hist-montreal.jpg" rel="lightbox[vieux-montreal]" data-lbtitle="Centre d'histoire de Montréal" >
<img src="images/albums photos/sorties/vieux-montreal/centre-hist-montreal.jpg" width="125px" border="5px" />
</a>

<a href="images/albums photos/sorties/vieux-montreal/expo-samourai.jpg" rel="lightbox[vieux-montreal]" data-lbtitle="Expo Samourai" >
<img src="images/albums photos/sorties/vieux-montreal/expo-samourai.jpg" width="125px" border="5px" />
</a>
</div>

Et voici le code de mon style...

#albums {
	padding:15px;
	width:200px;
	color:#663300;
	font-size:1em;
	padding-left:5px;
	padding-top:0px;
	margin-top:0px;
	display:block;
	float:left;
}

#albums a{
	text-decoration:none;
	color:#663300;
	font-size:1em;
}

#albums a:hover{
	text-decoration:none;
	color:#ff6600;
	font-size:1em;
}

#sorties1 {
	display:none;
	background:#f5f1e4;
	width:750px;
	padding:15px;
	margin-top:25px;
	float:right;
	color:#f5f1e4;	
}

#sorties1 a{
	color:#f5f1e4;	
}

#sorties1 a:hover {
	color:#ff6600;	
}

.sorties1 {
	color:#ff6600;	
}



#sorties2 {
	display:none;
	background:#f5f1e4;
	width:750px;
	padding:15px;
	margin-top:25px;
	float:right;
	color:#f5f1e4;
}

#sorties2 a{
	color:#f5f1e4;	
}

#sorties2 a:hover {
	color:#ff6600;	
}

.sorties2 {
	color:#ff6600;	
}

Je suis un peu mal prise... je ne suis pas habitué de travailler avec du javascript et autre mais je ne trouvais pas d'autre solution à ce que voulait mon client....

Si quelqu'un veut m'aider, je serais aux anges de régler ce problème! Merci beaucoup!

Tunis
15 févr. 2013 à 17:09

salut,

donc le probleme viens bien du display:none,

il faut obligatoirement le mettre dans le code de la page html et non dans le css tout simplement.

je ne m'y connais pas assez pour pouvoir te dire si il est possible de modifier la fonction pour qu'elle fonctionne avec les css, peut etre en modifiant a la place de la balise display la balise class et en faisant deux class dans ton css.mais je ne sais pas ce que ca peux donner x)

Bonne continuation a toi :)

Un webmaster...
26 sept. 2014 à 18:03

"je ne trouvais pas d'autre solution à ce que voulait mon client."
Quand on lit ça, ça fait peur de se dire que vous êtes "professionnelle'...
Créer des sites n'est pas un jeu. Si vous avez des 'clients', vous avez pour responsabilité de leur vendre un site dit 'professionnel', chose que j'ai du mal à croire quand je lis ça... ( et c'est pas juste un site avec un design correct, il y a les fonctionnalités qui doivent être adaptées, l'optimisation page-speed, l'optimisation référencement, fournir un sitemap, etc...)

Discussions similaires

masquer/afficher Div avec CSS sans JS

comment créer une div scrollable html? urgent

Comment ne pas diffuser mes commentaires FB sur le fil d'actualité de mes amis ?

Désindexer son profil Facebook et être invisible des curieux

Code Vba Pour masquer les Feuilles

[html] cacher ou afficher des éléments

Discussions similaires

Newsletters