Fonction afficher/cacher un div, cacher les autres. [Résolu/Fermé]

Signaler
-
 Un webmaster... -
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++; 
	} 
}

6 réponses

Messages postés
838
Date d'inscription
vendredi 2 novembre 2012
Statut
Membre
Dernière intervention
17 décembre 2015
124
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.
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
7
Date d'inscription
mardi 7 octobre 2008
Statut
Membre
Dernière intervention
3 février 2013
1
C'est super comme code!

Je veux l'utiliser mais voici:
lorsque j'effectue le premier click sur le lien, mon div ne s'affiche pas... il ne s'affiche qu'au deuxième click.

Je ne suis pas assez calée pour corrigée la fonction pour que le div s'affiche au premier click, vous pouvez m'aider?
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

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

Je peux avoir une rapide explication du code?

merci !
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 !
waa super merci beaucoup !

je me penche dessus!

bonne soirée
Salut,

vérifie bien que tu est mis le style="display:none" dans le code de ta div.

Si c'est pas ça alors tu as surement fait une erreur de syntaxe quelque part en recopiant la fonction car normalement si la div est masquer au départ elle s'affichera au premier click (alors que si elle est visible elle sera masquer au premier click).

si ça ne marche toujours pas écris le code de ta page qu'on puisse y jeter un oeil :)
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!
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 :)

"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...)
Wow! Merci Tunis,

tu avais complètement raison! Je n'ai fais que transférer le style display dans le html au lieu de le mettre dans la page css et ça fonctionne!

Merci énormément!