Discussion :

[Joad]

Bonjour,

Je cherche du code Javascript pour afficher/masquer un <div> lorsque l'utilisateur clique sur un lien.
J'aimerai que ce <div> reste affiché tant que l'utilisateur ne clique pas sur un autre lien affichant un autre <div>.

Avez vous une idée ?

Merci d'avance.

[.:morgoth:.]

Supposons que tu as un <DIV ID="Test_Div">, il faut ecrire :

Code :

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

1
2
document.getElementById('Test_Div').style.display=''; // pour afficher
document.getElementById('Test_Div').style.display='NONE'; // pour masquer

[Joad]

ok merci beaucoup.
ca m'a permis d'afficher/masquer 1 div

mais ce que j'aimerai faire c'est avoir plusieurs <DIV> a afficher/masquer avec chacune un lien...

[.:morgoth:.]

Eh bien tu utilises le même principe en utilisant une fonction qui va etre appelée par tous tes liens :

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
<script language="Javascript">
  function func1 (div_name)
  {
    document.getElementById (div_name).style.display=''; // ou NONE
  }
</script>
 
<!-- ... les liens : -->
<DIV  ID='div1'>
<A HREF="..." OnClick="func1 ('div1');">lien1</A>
</DIV>
<DIV ID='div2'>
<A HREF="..." OnClick="func1 ('div2');">lien2</A>
</DIV>
<!-- ... -->

[Joad]

Merci beaucoup pour ta réponse.
En fait j'avais aussi besoin de masquer tous les autres <div> quand un est afficher tout en gardant affichés certains.
Grâce a toi et a google :

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
 
 
function showdiv(pass) 
{
	var divs = document.getElementsByTagName('div');
 
	for(i=0;i<divs.length;i++)
	{
		if(divs[i].id.match(pass))
		{
			if (document.getElementById) 
				divs[i].style.visibility="visible";
			else
			if (document.layers) 
				document.layers[divs[i]].display = 'visible';
			else // IE 4
				document.all.divs[i].visibility = 'visible';
		} 
		else if(!(divs[i].id.match('div23')) ^ !(divs[i].id.match('header')) ^ !(divs[i].id.match('container2')) ^ !(divs[i].id.match('div67')) ^ !(divs[i].id.match('login')) ^ !(divs[i].id.match('div65')) ^ !(divs[i].id.match('navlist')))
		{
			if (document.getElementById)
				divs[i].style.visibility="hidden";
			else
				if (document.layers) 
					document.divs[i].visibility = 'hidden';
				else
					document.all.divs[i].visibility = 'hidden';
		}
	}
}

[Space Cowboy]

Avec ca

Code :

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

1
2
<div><a href="javascript:afficher_masquer();">Afficher</a>Masqué</a></div>
<div id="Test_Div">texxxxxxxxxt</div>

Code :

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

1
2
3
4
5
function afficher_masquer()
{
	document.getElementById('Test_Div').style.display=''; // pour afficher
	document.getElementById('Test_Div').style.display='NONE'; // pour masquer
}

Le texte ce masque mais ne ce réaffiche pas.