bouton, cache DIV

Version imprimable

bouton, cache DIV

Bonjour a tous,

Je souhaite afficher/cacher un champs DIV en cliquant dans une checkbox.
J'ai 3 checkbox et trois DIV differentes :

Mon 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
<script type="text/javascript">
function affCache(idDiv) {
var div = document.getElementById(idDiv);
if (div.style.display == "")
div.style.display = "none";
else
div.style.display = "";
}
</script> 
 
<title>Document sans titre</title>
</head>
 
<body>
<form name="form">
<input type="checkbox" onclick="affCache('div1');" value=""/>&nbsp;Test 1
<br />
<input type="checkbox" onclick="affCache('mac');" value="non"/>&nbsp;Test 2
<br />
<input type="checkbox" onclick="affCache('pc');" value="non"/>&nbsp;Test 3
<div id="div1">
test1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eros risus,
 porttitor sed, malesuada quis, dictum non, lorem. Vestibulum sed tortor.
 Aenean vitae turpis. Cras fringilla scelerisque orci. Morbi pretium
 condimentum risus. Sed elementum lacinia urna. Proin sed pede ut felis
 ultrices tincidunt. Aliquam erat volutpat. Morbi convallis odio nec ante.
 Donec turpis. Nunc sit amet turpis eget nibh adipiscing aliquam.
</div>
<br />
<div id="mac">
test2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eros risus,
 porttitor sed, malesuada quis, dictum non, lorem. Vestibulum sed tortor.
 Aenean vitae turpis. Cras fringilla scelerisque orci. Morbi pretium
 condimentum risus. Sed elementum lacinia urna. Proin sed pede ut felis
 ultrices tincidunt. Aliquam erat volutpat. Morbi convallis odio nec ante.
 Donec turpis. Nunc sit amet turpis eget nibh adipiscing aliquam.
</div>
<br />
<div id="pc">
test3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eros risus,
 porttitor sed, malesuada quis, dictum non, lorem. Vestibulum sed tortor.
 Aenean vitae turpis. Cras fringilla scelerisque orci. Morbi pretium
 condimentum risus. Sed elementum lacinia urna. Proin sed pede ut felis
 ultrices tincidunt. Aliquam erat volutpat. Morbi convallis odio nec ante.
 Donec turpis. Nunc sit amet turpis eget nibh adipiscing aliquam.
</div>
</form>

Cela marche à moitié :

Ce que cela doit faire : Quand je clique sur la checkbox Test 1, le texte "Test1 et son texte" doivent disparaitre. Pareil pour Test 2 et Cie

Ce que cela fait : Quand je clique sur Test 1, cela efface le texte "Test3 et son texte". Ensuite Test2 et enfin Test1 et systematiquement dans cet ordre

http://www.copenaol.free.fr/jstest.php

Merci de votre aide

21/10/2008, 09h26
E.Bzz

Bonjour,
heu ... hum :koi:

Je crois que tu n'as juste pas bien regardé quel texte disparaît à chaque clic.

Tout marche normalement (IE6 et FF3) :mrgreen:

EDIT : bien que ça fonctionne, si ce n'est pas l'effet attendu, essaye avec style.visibility ('visible' / 'hidden')au lieu de style.display ...

A+
21/10/2008, 10h13
epoc.01

Autant pour moi, j'avais en tete une certaine mise en page et effectivement cela ne collait pas cette mise en page.

Merci E.bzz.
Derniere chose / Saurait comment faire pour que le div apparaisse au chargement de la page en hiden par defaut ?

Merci egalement a Matthieu , je me suis appuyé sur son code qu'il a posté ici pour faire ma page.
21/10/2008, 10h26
E.Bzz

Citation:

Envoyé par epoc.01

Derniere chose / Saurait comment faire pour que le div apparaisse au chargement de la page en hiden par defaut ?

Code:

<div id="div1" style="visibility:hidden;">

;)

A+
21/10/2008, 11h03
epoc.01

Cela fonctionne, merci :D
Mais je vais etre perfectionniste...
http://copenaol.free.fr/jstest.php

Cela fonctionne mais je souhaiterai que le bloc se disparaisse si le hidden est activé, là il reste présent.
21/10/2008, 11h23
E.Bzz

Citation:

Envoyé par epoc.01

Cela fonctionne mais je souhaiterai que le bloc se disparaisse si le hidden est activé, là il reste présent.

8O
Alors c'était display ...

A+

Merci E.bzz

http://copenaol.free.fr/jstest.php

Le code si un jour quelqu'un est interessé /

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
 
<script type="text/javascript">
function affCache(idDiv) {
var div = document.getElementById(idDiv);
if (div.style.display  == "")
div.style.display  = "none";
else
div.style.display  = "";
}
</script> 
 
<title>Document sans titre</title>
</head>
 
<body>
<form name="form">
<input type="checkbox" onclick="affCache('div1');" value=""/>&nbsp;Test 1
<br />
<div id="div1" style="display:none;">
test1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eros risus,
 porttitor sed, malesuada quis, dictum non, lorem. Vestibulum sed tortor.
 Aenean vitae turpis. Cras fringilla scelerisque orci. Morbi pretium
 condimentum risus. Sed elementum lacinia urna. Proin sed pede ut felis
 ultrices tincidunt. Aliquam erat volutpat. Morbi convallis odio nec ante.
 Donec turpis. Nunc sit amet turpis eget nibh adipiscing aliquam.
</div>
<input type="checkbox" onclick="affCache('mac');" value="non"/>&nbsp;Test 2
<br />
<div id="mac" style="display:none;">
test2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eros risus,
 porttitor sed, malesuada quis, dictum non, lorem. Vestibulum sed tortor.
 Aenean vitae turpis. Cras fringilla scelerisque orci. Morbi pretium
 condimentum risus. Sed elementum lacinia urna. Proin sed pede ut felis
 ultrices tincidunt. Aliquam erat volutpat. Morbi convallis odio nec ante.
 Donec turpis. Nunc sit amet turpis eget nibh adipiscing aliquam.
</div>
<input type="checkbox" onclick="affCache('pc');" value="non"/>&nbsp;Test 3
<br />
<div id="pc" style="display:none;">
test3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eros risus,
 porttitor sed, malesuada quis, dictum non, lorem. Vestibulum sed tortor.
 Aenean vitae turpis. Cras fringilla scelerisque orci. Morbi pretium
 condimentum risus. Sed elementum lacinia urna. Proin sed pede ut felis
 ultrices tincidunt. Aliquam erat volutpat. Morbi convallis odio nec ante.
 Donec turpis. Nunc sit amet turpis eget nibh adipiscing aliquam.
</div>
<br />
</form>