Bouton et DIV caché

Version imprimable

Bouton et DIV caché

bonjour,
j'essaye en vain de modifier ce code pour pouvoir gérer pouvoir bouton et div à afficher cacher mais cela ne fonctionne pas, j'ai du faire une bétise mais où :( car le javascript ce n'est pas trop mon truc :oops:
voici le code :

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
<html>
<head>
<title></title>
<style type="text/css">
.Conteneur{
width: 180px;
border-style: solid;
border-width: 1px;
border-color: #AAAAAA;
}
 
 
.DivBlaBla{
padding: 10px;
margin: 0px;
}
 
</style>
 
<script type="text/javascript">
<!--
 
function Action(obj)
{
 var e =document.getElementsByName(obj);
 if (obj.id==obj)
 {
  if (e.style.display=="none")
  {
    e.style.display="block";
    obj.value="Fermer";
  }
  else
  {
    e.style.display="none";
    obj.value="Ouvrir";
  }
 }
}
//-->
</script>
 
</head>
 
<body>
 
<input type="button" value="Ouvrir" id="1" onclick="Action('1')">
 
 
<div id="1" 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>
 
 
<input type="button" value="Ouvrir" id="2" onclick="Action('2')">
 
 
<div id="2" 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>

merci pour votre aide
A+
ludo

01/11/2008, 18h03
Auteur
bonjour,
Code:

1 2 document.getElementsByName(obj);
c'est
Code:

1 2 document.getElementsById(obj);
et les id doivent être uniques dans la page. Tu confonds les attributs name et id.

merci il y a du mieux :) mais le texte du bouton ne change pas :(

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
<html>
<head>
<title></title>
<style type="text/css">
.Conteneur{
width: 180px;
border-style: solid;
border-width: 1px;
border-color: #AAAAAA;
}
 
 
.DivBlaBla{
padding: 10px;
margin: 0px;
}
 
</style>
 
<script type="text/javascript">
<!--
 
function Action(obj)
{
 var e =document.getElementById(obj);
 if (obj.id=='b'.obj)
 {
  if (e.style.display=="none")
  {
    e.style.display="block";
    obj.value="Fermer";
  }
  else
  {
    e.style.display="none";
    obj.value="Ouvrir";
  }
 }
}
//-->
</script>
 
</head>
 
<body>
 
<input type="button" value="Ouvrir" id="b1" onclick="Action('1')">
 
 
<div id="1" 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>
 
 
<input type="button" value="Ouvrir" id="b2" onclick="Action('2')">
 
 
<div id="2" 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>

Attention à la concaténation des chaines de caractères : c'est avec le signe "+" que l'on fait la concaténation pas avec le point (c'est du PHP)

J'ai ajouté un paramètre à ta fonction et modifié l'appel.
J'ai également modifié l'id des div (je préfère leur donner un nom plutôt qu'un chiffre).

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
 
<html>
<head>
<title></title>
<style type="text/css">
.Conteneur{
width: 180px;
border-style: solid;
border-width: 1px;
border-color: #AAAAAA;
}
 
 
.DivBlaBla{
padding: 10px;
margin: 0px;
}
 
</style>
 
<script type="text/javascript">
<!--
 
function Action(obj, btn)
{
 var e =document.getElementById(obj);
 
 if (btn.id==("b"+obj))
 {
  if (e.style.display=="none")
  {
    e.style.display="block";
    btn.value="Fermer";
  }
  else
  {
    e.style.display="none";
    btn.value="Ouvrir";
  }
 }
}
//-->
</script>
 
</head>
 
<body>
 
<input type="button" value="Ouvrir" id="bdiv1" onclick="Action('div1', this)">
 
 
<div id="div1" 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>
 
 
<input type="button" value="Ouvrir" id="bdiv2" onclick="Action('div2', this)">
 
 
<div id="div2" 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>

01/11/2008, 18h38
lelectronique.com

impec merci bien j'ai compris le code en plus maintenant cela est plus clair pour moi ;)
bonne soirée
A+