au clique de la souris.

Version imprimable

14/03/2005, 09h30
Joad

Afficher/Masquer un <DIV> au clique de la souris.

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.

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

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

14/03/2005, 10h05
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...

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

Code:

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

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:

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';
		}
	}
}

Avec ca

Code:

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

Code:

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.