Afficher / Masquer des div

**spawns** · 20/11/2008, 13h47

Slt à tous,
je viens vers vous car moi et le javascript j'ai un peu de mal.

j'ai trouvé ce code sur le net mais cela 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
function visuel (thingId) {
	var targetElement;
	targetElement = document.getElementById(thingId) ;
 
	if (targetElement.style.display == "none") {
		targetElement.style.display = "" ;
	} else {
		targetElement.style.display = "none" ;
	}
 
}
</script>

Code :

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

1
2
<a href="javascript:visuel('divid');">afficher/masquer</a>
<div id="divid" style="display:none;">contenu</div>

Je vous explique la manipe:
j'ai des liens qui sont afficher via une requete :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$nc=0;
$req2 = mysql_query("SELECT * FROM link ORDER BY ordresouscat") or die("Erreur SQL2 !"); 
while($data2 = mysql_fetch_array($req2)) {
$lien=$data2['souscat'];
 
echo '»<a href="javascript:visuel(\''.$nc.'\');">'.$lien.'</a><br />';
<div id="divid'.$nc.'" style="display:none;">- '.$descrip.' <br /></div>
}
$nc++;

je voudrais que tous les liens s'affiche les un en dessous des autres (ca la requete s'en charge), et pouvoir afficher la description sous le lien en clinquant sur le lien correspondant , mais que les autres descriptions soient masquée. que l'on puisse voir toujours uniquement une seule description à la fois.

Je sais pas si je me suis fait bien comprendre.
Si quelqu'un peut me donner un coup de main c'est pas de refus.

**Bovino** · 20/11/2008, 14h17

Ce sont mes yeux ou tu donnes le même id à plusieurs div ???

**Cornholio** · 20/11/2008, 14h22

En effet, il faut que dans ta boucle tu génères un id unique pour chaque div.

exemple :

Code :

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

1
2
3
4
5
6
7
8
 
$i = 0;
while($data2 = mysql_fetch_array($req2)) {
     $lien=$data2['souscat'];
     $i++;
     echo '<a href="javascript:visuel(\'divid'.$i.'\');">'.$lien.'</a><br />';
     echo '<div id="divid'.$i.'" style="display:none;">- '.$descrip.' <br /></div>';
}

**spawns** · 20/11/2008, 14h23

Non,
mais comment faire pour donner des id differents ?

**spawns** · 20/11/2008, 14h26

Ahhh
Ok j'ai pigé

je rajoute un petit compteur mais cela ne fonctionne pas plus car lorsque j'ouvre une description ca ne masque pas les autres.

J'ai modifié le code... pour le compteur

**le_chomeur** · 20/11/2008, 14h32

il te faut une boucle pour masqué tous les autres

**Sub0** · 20/11/2008, 14h34

Salut. ce que tu veux est en fait une infobulle, non ?

http://javascript.developpez.com/faq...ript#InfoBulle

**spawns** · 20/11/2008, 14h36

Tu peux m'aiguiller un peu avec un bout de code
parce que la je rame complet...

**spawns** · 20/11/2008, 14h37

Envoyé par Sub0

Salut. ce que tu veux est en fait une infobulle, non ?

http://javascript.developpez.com/faq...ript#InfoBulle

Non pas du tout.
la je donne le champs description mais il y en plain d'autres.

**le_chomeur** · 20/11/2008, 14h44

montre nous le code généré

**Bovino** · 20/11/2008, 14h47

Ou sinon, si tu ne veux qu'un commentaire possible sur la page, tu stockes dans une variable globale l'id de la div ouverte ou false et dans ta fonction, tu testes si une autre div est déjà ouverte, si c'est le cas tu la ferme puis tu ouvres la nouvelle sinon, tu affiches ou masque la nouvelle.

**spawns** · 20/11/2008, 15h00

Attendez,
ca fait depuis le debut de la semaine que je suis la dedans et je sais plus ou j'habite.
En plus je me suis planté.

en realité ca me sert pour un menu avec categorie et sous-categorie
il faut que lorsque je clique sur une categorie cela me developpe/affiche en dessous les sous categories.
Mais comme cela recharge egalement la page, il faut que cela reste affiché.

j'avais pas pensé au rechargement de page.

**le_chomeur** · 20/11/2008, 15h07

ton code ...

**spawns** · 20/11/2008, 15h12

Comme je le disais precedement c'est donc une histoire de menu sous-menu

le javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
function visibilite(thingId)
{
 var i;
 var targetElement;
 targetElement = document.getElementById("divid" + thingId) ;
 if ( targetElement.style.display == "none") 
     targetElement.style.display = "" ;
 else
     targetElement.style.display = "none" ;
}
</script>

la fonction php

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
function visu_cat_souscat(){
$nc=0;
$req1 = mysql_query("SELECT cat, ordrecat, COUNT(*) AS nbre0 FROM produit GROUP BY cat ORDER BY ordrecat") or die("Erreur SQL1 !"); 
$nb1=mysql_num_rows($req1); 
if ($nb1=="0")	{	
			}
	else{	 
	while($data1 = mysql_fetch_array($req1)) 
			{
			$bob=$data1['cat'];
			echo '<strong>'.$bob.' ('.$data1['nbre0'].')</strong><br />';
 
					$req2 = mysql_query("SELECT * FROM produit WHERE cat='$bob' GROUP BY souscat ORDER BY  ordresouscat") or die("Erreur SQL2 !"); 
					while($data2 = mysql_fetch_array($req2)) {
 
					$souscc=$data2['souscat'];
					echo '» <a href="#" onClick="javascript:visibilite(\''.$nc.'\');" >'.$souscc.'</a><br />';
 
						$req3 = mysql_query("SELECT * FROM produit WHERE cat='$bob' AND souscat='$souscc' ") or die("Erreur SQL3 !"); 
						while($data3 = mysql_fetch_array($req3)) {
						$prod=$data3['ref'];
						echo '<div id="divid'.$nc.'" style="display:none;">&nbsp;&nbsp;&nbsp;- <a href="?rub=gene&amp;prod='.$prod.'">'.$prod.'</a> <br /></div>';
					$nc++;					
						}
					}
			echo'<br />';
			}		
		}
 
 
}

**le_chomeur** · 20/11/2008, 15h15

code généré !!! coté html !!
c'est demandé plusieurs fois plus haut

**spawns** · 20/11/2008, 15h31

Envoyé par le_chomeur

code généré !!! coté html !!
c'est demandé plusieurs fois plus haut

c'est dire ?

afficher la source

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
function visibilite(thingId)
{
 var i;
 var targetElement;
 targetElement = document.getElementById("divid" + thingId) ;
 if ( targetElement.style.display == "none") 
     targetElement.style.display = "" ;
 else
     targetElement.style.display = "none" ;
}
</script>
 
	<div id="conteneur">		
		<h1 id="header"><a href="http://www.nomdusite.com" title="Nom du site"><span>Nom du site</span></a></h1>		
<div id="contenu">
<div id="gauche"><strong>Alimentation (3)</strong><br />» <a href="?rub=genesc&amp;souscat=Fruits" onClick="javascript:visibilite('0');" >Fruits</a><br /><div id="divid0" style="display:none;">&nbsp;&nbsp;&nbsp;- <a href="?rub=gene&amp;prod=Cerise">Cerise</a> <br /></div><div id="divid1" style="display:none;">&nbsp;&nbsp;&nbsp;- <a href="?rub=gene&amp;prod=Banane">Banane</a> <br /></div>» <a href="?rub=genesc&amp;souscat=Legumes" onClick="javascript:visibilite('2');" >Legumes</a><br /><div id="divid2" style="display:none;">&nbsp;&nbsp;&nbsp;- <a href="?rub=gene&amp;prod=Patate">Patate</a> <br /></div><br /><strong>Decoration (2)</strong><br />» <a href="?rub=genesc&amp;souscat=Bougie" onClick="javascript:visibilite('3');" >Bougie</a><br /><div id="divid3" style="display:none;">&nbsp;&nbsp;&nbsp;- <a href="?rub=gene&amp;prod=Rouge">Rouge</a> <br /></div><div id="divid4" style="display:none;">&nbsp;&nbsp;&nbsp;- <a href="?rub=gene&amp;prod=Vert">Vert</a> <br /></div><br /><strong>Info (2)</strong><br />» <a href="?rub=genesc&amp;souscat=Hd" onClick="javascript:visibilite('5');" >Hd</a><br /><div id="divid5" style="display:none;">&nbsp;&nbsp;&nbsp;- <a href="?rub=gene&amp;prod=Sea">Sea</a> <br /></div>» <a href="?rub=genesc&amp;souscat=Souris" onClick="javascript:visibilite('6');" >Souris</a><br /><div id="divid6" style="display:none;">&nbsp;&nbsp;&nbsp;- <a href="?rub=gene&amp;prod=Logitech">Logitech</a> <br /></div><br /></div>

**spawns** · 20/11/2008, 15h41

Merci à tous,
laissez tomber finalement le vais procéder autrement.
faute du rechargement de page.

Merci yout de même.
@+

Désolé du dérengement.

Afficher / Masquer des div

JavaScript

Discussions similaires

Partager

Partager