[CSS & JAVASCRIPT] Afficher/Masquer un div

**alexfrere** · 04/07/2006, 17h03

Code :

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

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

**SpaceFrog** · 04/07/2006, 17h09

un onclick peut accepeter plusieurs instructions séparées par un point virgule ...
oui encore appeler une focntion ...

**alexfrere** · 04/07/2006, 18h15

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

**Poussy-Puce** · 04/07/2006, 18h32

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

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

**alexfrere** · 04/07/2006, 19h07

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

**Auteur** · 04/07/2006, 19h55

bonjour,

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

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

**alexfrere** · 05/07/2006, 12h34

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

**Auteur** · 05/07/2006, 13h15

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.

**alexfrere** · 05/07/2006, 15h59

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

**alexfrere** · 05/07/2006, 16h02

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

[CSS & JAVASCRIPT] Afficher/Masquer un div

JavaScript

Discussions similaires

Partager

Partager