bouton, cache DIV

**epoc.01** · 21/10/2008, 05h48

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 :

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

**E.Bzz** · 21/10/2008, 09h26

Bonjour,
heu ... hum

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

Tout marche normalement (IE6 et FF3)

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+

**epoc.01** · 21/10/2008, 10h13

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.

**E.Bzz** · 21/10/2008, 10h26

Envoyé par epoc.01

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

Code :

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

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

A+

**epoc.01** · 21/10/2008, 11h03

Cela fonctionne, merci

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.

**E.Bzz** · 21/10/2008, 11h23

Envoyé par epoc.01

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

Alors c'était display ...

A+

**epoc.01** · 21/10/2008, 11h38

Merci E.bzz

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

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

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

bouton, cache DIV

JavaScript

Discussions similaires

Partager

Partager