Afficher/masquer un div

**beji15** · 05/01/2008, 02h51

Bonsoir(ou Bonjour

),
j'aimerais vous demander si vous ne sauriez pas comment faire pour
afficher/masquer un div portant un id différent ?
Exemple : j'ai 2 tableaux, portant chacun respectivement un id différent (table_1 et table_2) et donc, j'aimerais grâce à un lien faire cacher tout le div
et le réafficher en recliquant sur le lien.

Vous l'avez compris, je voudrais faire comme sur ce forum avec le système + et -.
J'ai essayé de regarder le code javascript et le css mais il y a tellement de choses que je me suis perdu alors j'ai préferé faire appel à vous.

En conclusion, j'aimerais faire une fonction qui cache un div grâce un lien ( ou une image, c'est plus joli pour un forum

) et le faire réapparaître en recliquant sur l'image - qui est devenu + lors du clic précédent.

Voilà, j'espère que vous pourrez m'aider, merci à celle/celui qui m'aidera.

**Kerod** · 05/01/2008, 03h45

tu pourrais faire comme ceci :

Code html :

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

<img src="plus.gif" id="image" onclick="display('iddiv',this.id)" />

Et pour le javascript:

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
 
function display(ident,image)
{
    var mon_div = document.getElementById(ident);
 
    if(mon_div..style.display == 'none')
    {
          mon_div.style.display = '';
          image.src = 'moins.gif';
    }
    else
    {
         mon_div.style.display = 'none';
         image.src = 'plus.gif';
    }
}

**Auteur** · 05/01/2008, 12h48

Code javascript :

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

1
2
3
 
          mon_div.style.display = '';
          image.src = 'moins.gif';

personnellement, je préfère préciser la valeur de la propriété display...

Code javascript :

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

1
2
3
 
          mon_div.style.display = 'block';
          image.src = 'moins.gif';

**sachav** · 05/01/2008, 13h06

Envoyé par Kerod

tu pourrais faire comme ceci :

Code :

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

1
2
 
    if(mon_div..style.display == 'none')

Qu'un seul point (petite faute de frappe, je suppose)

Code :

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

1
2
 
    if(mon_div.style.display == 'none')

**Kerod** · 05/01/2008, 15h08

Envoyé par Auteur

personnellement, je préfère préciser la valeur de la propriété display...

Code javascript :

mon_div.style.display = 'block';
image.src = 'moins.gif';

Peut-être mais si c'est un tableau ça risque de poser problème

**Auteur** · 05/01/2008, 15h22

Envoyé par Kerod

Peut-être mais si c'est un tableau ça risque de poser problème

oui certes pour un tableau, il faut laisser vide. Mais là c'est un div

Toutefois, je crois que si la valeur de display n'est pas précisée, une valeur par défaut lui est affectée, c'est bien ça ?

**Kerod** · 05/01/2008, 18h19

Par défaut c'est block pour un div

**beji15** · 05/01/2008, 23h47

Je vous remercie tous.
J'ai donc essayé votre code Kerod mais ce qui se passe, c'est que sous IE et Opera, ça fonctionne mais l'image reste toujours la même.

Sous FF, il n'y a rien qui se passe !

Si vous trouvez le temps, pourriez vous corriger le problème s'il vous plaît.
Merci 1001 fois

**Kerod** · 06/01/2008, 00h24

Ah oui c'est vrai.

Le this.id tu le modifies et tu mets this

ça devrait passer là

**beji15** · 06/01/2008, 01h58

Merci !
Tout fonctionne à merveille pour IE et Opera. L'image - devient + et vice versa !
Cependant, le problème persiste sous FF et rien ne se produit ! C'est comme si c'était une image ordinaire pour FF...

Ce petit détail m'intrigue, surtout que la plupart des utilisateurs utilisent FF...

Encore merci, c'est aimable à vous de m'aider

**Kerod** · 06/01/2008, 02h20

Désolé de te contredire chez moi ça fonctionne

Code html :

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
<html>
<!-- Date de création: 06/01/2008 -->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title></title> 
  <script type="text/javascript">
         function change(image)
       {
               image.src="menu_over.png";
       }   
       
       function restore(image)
       {
               image.src="menu.png";
       }
  </script>
</head>
<body>
       <img src="menu.png" onmouseover="change(this)" onmouseout="restore(this)" />
</body>
</html>

**beji15** · 06/01/2008, 03h18

Heu...je m'excuse, en regardant les erreurs javascript dans ma console
il était marqué "display is not a function" alors j'ai regardé le code, j'ai vu que j'avais marqué form à la place de forum

Mille excuses, maintenant tout marche sur tous les navigateurs !

Mais, pour finir, je voudrais savoir s'il n'y pas moyen
de généraliser cette fonction ?
Vu que tous les id's sont uniques ( créés par php)
et qu'ils se nomment tous table_1, table_2, table_3,etc...
Je voudrais savoir s'il n'était pas possible de vérifier le nombre après table_
et fermer le div concerné car là, je suis oubligé de retaper la même fonction pour 10 tables pour pouvoir fermer le div qu'ils contiennent
et s'il y a d'autres tables_ créés, je suis oubligé de faire encore du copier/coller et remplacer juste le chiffre pour qu'il corresponde au nouveau div...
J'espère que c'est faisaible, je te remercie encore Kerod, t'es un As !

**Kerod** · 06/01/2008, 04h15

Le première fonction que je t'ai donné est faite pour.

Il te suffit dans ta boucle PHP de mettre l'id de ton div et le reste fonctionnera comme prévu. Pas besoin de faire 10000 fonctions identiques celle là fera très bien l'affaire

**beji15** · 07/01/2008, 11h23

Désolé du retard, j'étais très occupé avec certains dossiers dans mon travail.
Je te remercie Kerod pour ton soutien, j'ai donc fait ce que tu m'as indiqué et maintenant, tout va pour le mieux !!
Sur ce , je te souhaite une bonne journée et mes meilleurs voeux pour 2008

Afficher/masquer un div

JavaScript

Discussions similaires

Partager

Partager