Faire disparaitre et apparaitre une div

Version imprimable

14/04/2010, 11h18
kopax

Faire disparaitre et apparaitre une div

Bonjour,

Je cherche à crée un tableau qui disparait apparait suite à un clique sur un bouton.
Quand le tableau est masqué il ne dois plus prendre de place.

J'ai parcourus plusieurs forums mais n'a rien trouvé de convaincant, apparemment les mauvais script que j'ai trouvé pose des problèmes d'incompatibilités de navigateurs.

J'ai crus également comprendre que c'étais possible de le faire avec du css.
J'aimerai aussi que le bouton change si le tableau est affiché/masqué
(+)info -> (-)info -> (+)info.

Si quelqu'un qui à déjà fais cela aurai la gentillesse de partagé son code, je lui en serai gré.

Merci d'avance.

Bonjour,

vraiment bizarre que tu n'es pas trouvé de solution sur le NET... mais bon voici comme faire :

- donne un ID à ton tableau du genre :

Code:

<table id="monTable" >....</table>

sur ton bouton tu ajoutes :

Code:

<input type="button" ... onclick="cacheTable(this)" ... />

- ajoute le code suivant dans un fichier javascript ou entre balise javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function cacheTable(btn) { var tbl = document.getElementById("monTable"); if(tbl.style.display != 'none') { tbl.style.display = 'none'; btn.value="Afficher tableau"; } else { tbl.style.display = 'block'; btn.value="Cacher tableau"; } }

14/04/2010, 13h24
SpaceFrog

C'est même dans notre FAQ :roll:
14/04/2010, 13h59
kopax

Merci beaucoup,

SpaceFrog, je suis pas du genre à pas chercher, j'ai pas pensé à chercher dans votre faq tout simplement, pourtant c'est dans votre faq que j'ai trouvé le meilleurs tuto sur les listes déroulantes dynamique liée.

Merci beaucoup pour ta solution, je vais l'essayer.

Sinon pour le liens (+)info (-) info.

Ça dois changé avec du javascript aussi car il faut que la page ne se recharge pas.
Ne connaissant pas du tout le javascript, j'aimerai aussi qu'on me propose une solution si c'est pas trop compliqué.
14/04/2010, 14h21
kopax

Je viens de voir que tu fais l'exemple avec un bouton.

Je compte le faire avec du texte

Bon ok pour le
onclick="cacheTable(this)"
Ça ne va pas posé de problèmes

J'ai beau ne rien connaitre au javascript, que
btn.value="Afficher tableau";
btn.value="Cacher tableau"

C'était pour modifié le texte du bouton au clique.
Mais je ne peux pas mettre ce texte dans un fichier javascript, le site est en Anglais Vietnamien, et le (+)info va devenir un (+)thông tin

En même temps il n'y à que le plus qui dois ce changer en -
Je suppose que si je supprime les deux ligne btn.value ca ne va pas empêche le script de fonctionner.
Il n'y à pas sinon un moyen de le faire sans le bouton?
comme avec un span ou div plutôt
14/04/2010, 14h44
jsd03

J'ai fais avec un bouton mais avec tout autre élément ça fonctionne pareil ;)

Bon après tentative d'édition par moi même,
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <script language="javascript"> function cacheTable(btn) { var tbl = document.getElementById("monTable"); if(tbl.style.display != 'none') { tbl.style.display = 'none'; a.value="Afficher tableau"; } else { tbl.style.display = 'block'; a.value="Cacher tableau"; } } </script> <body> <p><a onclick="cacheTable(this)">Cliquer !</a></p> <table border="0"> <tr> <td width="61" id="monTable">Youpi !</td> </tr> </table>
Donc l'idée est la ça fonctionne.

Mais alors pour le changement de texte,
Il ne change pas, avec un bouton ca fonctionne.
Donc je suppose que en javascript le btn dois parler du bouton.
Comment parlé d'un A link en javascript ?

J'ai essayé de faire en sorte que le tableau ne sois par défaut pas affiché, et sans succès.

Le nom donnée au paramètre de la fonction cacheTable() étant btn il faut le laisser tel quel pour pouvoir changer le texte de l'élément qui appelle cette fonction. J'aurai très bien pu appeler ce paramètre "toto".

Donc voici le code corrigé :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <script language="javascript"> function cacheTable(elem) { var tbl = document.getElementById("monTable"); if(tbl.style.display != 'none') { tbl.style.display = 'none'; elem.value="Afficher tableau"; } else { tbl.style.display = 'block'; elem.value="Cacher tableau"; } } </script> <body> <p><a onclick="cacheTable(this)">Cliquer !</a></p> <table border="0" id="monTable"> <tr> <td width="61" >Youpi !</td> </tr> </table>
Pour cacher ton tableau au charegment de ta page il suffit de l'indiquer dans ta feuille de style css par :
Code:

1 2 3 4 #monTable { display : none; }