[CSS & JAVASCRIPT] Afficher/Masquer un div

Version imprimable

Code:

1 2 3 4 5 6 7 8 <table> <tr> <td><a onclick="document.getElementById('s8').style.display='block'">OUVRIR</a></td> </tr> <tr> <td><div id="s8" style="display: none;"> <a onclick="document.getElementById('s8').style.display='none'">FERMER</a> </div></td> </tr> </table>
ce code me permet d'afficher un bouton ouvrir qui affiche un div contenant un bouton fermer qui refaire le div.
Je voudrais que se soit le meme bouton pour les 2 actions et qu'il change de nom suivant l'état, merci de m'apporter votre savoir ;)

04/07/2006, 17h09
SpaceFrog

un onclick peut accepeter plusieurs instructions séparées par un point virgule ...
oui encore appeler une focntion ...
04/07/2006, 18h15
alexfrere

Dans se cas il lance la fonction afficher et masquer le div a chaque fois, il faut pas une sorte de switch ?
je sais pas les faire

J'ai fait ça seulement avec une condition, mais tu peux l'appréter à ta saveur avec un switch!!!

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
31
32
33
34
35
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<script language="javascript">
function ChangerEtat()
{
	var strEtat = document.getElementById('lblEtat').value
	if(strEtat=="on")
	{
		document.getElementById('lblEtat').value = 'off';
		document.getElementById('lblEtat').innerText = 'FERMER';
		document.getElementById('s8').style.display='block';
	}
	else
	{
		document.getElementById('lblEtat').value = 'on';
		document.getElementById('lblEtat').innerText = 'OUVRIR';
		document.getElementById('s8').style.display='none';
	}
}
</script>
</HEAD>
<BODY>
 
<table>
  <tr>
    <td><a onclick="ChangerEtat()"><label id="lblEtat" value="on">OUVRIR</label></a></td>
  </tr>
  <tr>
    <td><div id="s8" style="display: none;"> ValeurX</div></td>
  </tr>
</table>
</BODY>
</HTML>

04/07/2006, 19h07
alexfrere

merci, il y a 2 soucis.
* le bouton reste toujours avec OUVRIR
* lors du premier chargement, il faut double cliqué sur le bouton sinon ça ne marche pas

en fait je voudrais faire exactement comme le forum developpez.com avec la fonction pour cacher et afficher des forums
merci

bonjour,

seule contrainte : définir le style display dans la balise div.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.Conteneur{
width: 180px;
border-style: solid;
border-width: 1px;
border-color: #AAAAAA;
}
 
.Bouton{
padding: 2px;
border-style: outset;
border-width: 2px;
width: 150px;
text-align: center;
cursor: pointer;
margin: 2px;
border-color: #DDDDFF;
background-color: #DDDDFF;
color: #000000;
}
 
.DivBlaBla{
padding: 10px;
margin: 0px;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
 
function Action(obj)
{
 var e =document.getElementById("idBlabla");
 if (obj.id=="idBt1")
 {
  if (e.style.display=="none")
  {
    e.style.display="block";
    obj.value="Fermer";
  }
  else
  {
    e.style.display="none";
    obj.value="Ouvrir";
  }
 }
}
//-->
</script>
 
</head>
 
<body>
 
<input class="Bouton" type="button" value="Ouvrir" id="idBt1" onclick="Action(this)">
 
 
<div id="idBlabla" class="DivBlaBla" style="display: none">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
 
</body>
 
</html>

05/07/2006, 12h34
alexfrere

en fait le soucis est sur firefox ou il faut double cliqué
05/07/2006, 13h15
Auteur

Citation:

Envoyé par alexfrere

en fait le soucis est sur firefox ou il faut double cliqué

avec le script que je t'ai passé, il n'y a aucun problème de cette nature sous IE et Firefox.
05/07/2006, 15h59
alexfrere

ben moi j'ai le problème, bizard, sinon je n'ai pas réussi a remplacer le .innerText de manière à ne pas changer un texte mais une image, je veux alterner 2 images en fait
05/07/2006, 16h02
alexfrere

a non c'est bon, j'étais resté sur le premier code, merci