Faire disparaitre et apparaitre une div

**kopax** · 14/04/2010, 11h18

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.

**jsd03** · 14/04/2010, 11h39

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 :

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

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

sur ton bouton tu ajoutes :

Code :

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

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

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

Code javascript :

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

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";
}
 
}

**SpaceFrog** · 14/04/2010, 13h24

C'est même dans notre FAQ

**kopax** · 14/04/2010, 13h59

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

**kopax** · 14/04/2010, 14h21

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

**jsd03** · 14/04/2010, 14h44

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

**kopax** · 14/04/2010, 15h47

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

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

**jsd03** · 16/04/2010, 11h06

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

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

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

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

Faire disparaitre et apparaitre une div

JavaScript

Discussions similaires

Partager

Partager