Cacher Masquer un groupe de Div

Bonjour,

J'utilise ce code java:

<script language=JScript>
function ShowHideMenu(Div) {
   if (Div.style.display=='none') {
     Div.style.display='InLine';
    }
    else {
     Div.style.display='none';
    }
  }
function MaskOtherMenu(Div) {
   if (Div.style.display=='InLine') {
     Div.style.display='none';
    }
    else {
     Div.style.display='none';
    }
  }
</script>

Ceci dans le but d'afficher ou masquer mes Div.
J'ai à ce jour 4 Tableau différente qui utilise ce div
Sur onClick je fais un :
HideShowMenu(2002);MaskOtherMenu(2003);MaskOtherMenu(2004);MaskOtherMenu(2005);

N'y a t'il pas moyen de faire autrement?
Du style tous les Tableau autre que Div=2002 les masker ?

Actuellement, j'affiche un tableau 2002 en cliquant, si je reclique dessus il se masque.
Si je clique dessus 2003 et que 2002 est ouvert, il le ferme.
Mais à ce rythme, si j'ai 15 tableau, je devrais taper :MaskOtherMenu(Annee); autant de fois que j'aurais de tableau année !!!!!!

Auriez vous une idée?
Je me doute que c'est une exclusion avec If mais je n'arrive pas à la trouver

Merci pour votre aide,
Amicalement,
Thierry

Bonjour

Tu peux parcourir tous les div de ta page par la collection document.getElementsByTagName["div"]
C'est un tableau, donc ton premier div sera
document.getElementsByTagName["div"][0], le deuxième document.getElementsByTagName["div"][1] etc ...

Donc faire une function qui masque un div, du style :
function hideDiv(divId)
{
  document.getElementById(divId).style.visibility="hidden";
  document.getElementById(divId).style.display="none";
  }

(une autre pour afficher le div, evidemment)

pour masquer tous les div, faire une boucle du genre :
for (i=0; i<document.getElementsByTagName("div").length; i++)
   hideDiv(document.getElementsByTagName("div")[i].id);

Ceci à la condition que tous les div de ta page soient concernés.

Cordialement
Roro webDev

Je vais regarder avec ce code,
Je t'en remercie par avance.

Mes différents "Tableau" sont en fait des balises Table /Table, et mes id div sont du style 'An2002', 'An 2003', 'An2004',....
Je vais explorer cette solution,

Merci beaucoup pour ton coup de main

Pour être plus clair, rien de mieux que de mettre mon code exemple de ma présentation:

<table style="border-top-width:1px; border-right-width:1px; border-bottom-width:0px; border-left-width:1px; border-color:rgb(153,153,153); border-top-style:solid; border-right-style:solid; border-bottom-style:none; border-left-style:solid;" cellpadding="5" cellspacing="0" bgcolor="#CCCCFF" bordercolordark="white" bordercolorlight="black" width="143">
  <tr>
       
    <td>
      <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:5;">
        <a href="#" OnClick="javascript: ShowHideMenu(An2002);MaskOtherMenu(An2003);MaskOtherMenu(An2004);MaskOtherMenu(An2005);" OnMouseOver="javascript: self.status='2002';return(true);" OnMouseOut="javascript: self.status=' ';">2002</a></p>
<DIV id='An2002' style=display=none;>
        <table style="line-height:100%; margin-top:0; margin-bottom:0; border-top-width:1px; border-right-width:1px; border-bottom-width:0px; border-left-width:1px; border-color:rgb(153,153,153); border-top-style:solid; border-right-style:solid; border-bottom-style:none; border-left-style:solid;" cellpadding="5" cellspacing="0" bgcolor="#FFCCFF" width="130" align="right">
          <tr>
            <td style="border-bottom-width:1px; border-bottom-color:rgb(153,153,153); border-bottom-style:solid;">
              <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:10;">
          <a href="#" OnClick="javascript: ShowHideSousMenu(Mo0210);MaskOtherSousMenu(Mo0211);MaskOtherSousMenu(Mo0212);" OnMouseOver="javascript: self.status='Octobre 2002';return(true);" OnMouseOut="javascript: self.status=' ';">Octobre</a></p>
      <DIV id='Mo0210' style=display=none;>
                <table style="line-height:100%; margin-top:1; margin-bottom:1; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-color:rgb(153,153,153); border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid;" cellpadding="0" cellspacing="0" bgcolor="#FFFFCC" width="110" align="right">
                  <tr>
                    <td style="border-bottom-width:1px; border-bottom-color:rgb(153,153,153); border-bottom-style:solid;">
                      <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:10;"><a href="#" target="mainFrame">05 Octobre</a></p>
            </td>
          </tr>
                    <td>
                      <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:10;"><a href="#" target="mainFrame">06 Octobre</a></p>
          </td>
        </table>
        </DIV>
      </td>
    </tr>
    <tr>
            <td style="border-bottom-width:1px; border-bottom-color:rgb(153,153,153); border-bottom-style:solid;">
              <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:10;">
          <a href="#" OnClick="javascript: ShowHideSousMenu(Mo0211);MaskOtherSousMenu(Mo0210);MaskOtherSousMenu(Mo0212);" OnMouseOver="javascript: self.status='Novembre 2002';return(true);" OnMouseOut="javascript: self.status=' ';">Novembre</a></p>
      <DIV id='Mo0211' style=display=none;>
                <table style="line-height:100%; margin-top:1; margin-bottom:1; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-color:rgb(153,153,153); border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid;" cellpadding="0" cellspacing="0" bgcolor="#FFFFCC" width="110" align="right">
                  <tr>
                    <td style="border-bottom-width:1px; border-bottom-color:rgb(153,153,153); border-bottom-style:solid;">
                      <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:10;"><a href="#" target="mainFrame">10 Novembre</a></p>
            </td>
          </tr>
                    <td>
                      <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:10;"><a href="#" target="mainFrame">15 Novembre</a></p>
          </td>
        </table>
        </DIV>
      </td>
    </tr>
    <tr>
            <td style="border-bottom-width:1px; border-bottom-color:rgb(153,153,153); border-bottom-style:solid;">
              <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:10;">
          <a href="#" OnClick="javascript: ShowHideSousMenu(Mo0212);MaskOtherSousMenu(Mo0210);MaskOtherSousMenu(Mo0211);" OnMouseOver="javascript: self.status='Décembre 2002';return(true);" OnMouseOut="javascript: self.status=' ';">D&eacute;cembre</a></p>
      <DIV id='Mo0212' style=display=none;>
                <table style="line-height:100%; margin-top:1; margin-bottom:1; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-color:rgb(153,153,153); border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid;" cellpadding="0" cellspacing="0" bgcolor="#FFFFCC" width="110" align="right">
                  <tr>
                    <td style="border-bottom-width:1px; border-bottom-color:rgb(153,153,153); border-bottom-style:solid;">
                      <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:10;"><a href="#" target="mainFrame">12 Décembre</a></p>
            </td>
          </tr>
                    <td>
                      <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:10;"><a href="#" target="mainFrame">25 Décembre</a></p>
          </td>
        </table>
        </DIV>
      </td>
    </tr>
</table>
      </div>
        </td>
    </tr>
</table>


J'ai essayé avec ton code, mais j'avoue  être un peu paumé, je comprends le système, je teste ce que j'envoie et j'efface tous les autres, facile comme ça, mais à mettre en pratique :o/
Bref, je continue mon exploration

Amicalement
Thierry

Bonjour

Un petit exemple :
<style type="text/css">
<!--
.visu {
 background-color: #FF6699;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
function showDiv(divId)
{
hideAllDiv(); 
  document.getElementById(divId).style.visibility="visible";
  document.getElementById(divId).style.display="inline";
  }

function hideDiv(divId)
{
  document.getElementById(divId).style.visibility="hidden";
  document.getElementById(divId).style.display="none";
  }
 
 function hideAllDiv()
  {
 for (i=0; i<document.getElementsByTagName("div").length; i++)
    hideDiv(document.getElementsByTagName("div")[i].id);
 }
</script>
</head>

<body onLoad="hideAllDiv()">
  <p><a href="javascript:showDiv('an2001')">2001</a></p>
  <p><a href="javascript:showDiv('an2002')">2002</a></p>
  <p>&nbsp;</p>
<div id="an2001" style="">
  <table width="50" border="0" class="visu">
  <tr>
    <td colspan="3">2001</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
<div id="an2002">
<table width="50" border="0" class="visu">
  <tr>
    <td colspan="3">2002</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>


Cordialement
Roro webDev

Ok merci, j'essaie cela de suite sur mon code, c'est on ne peut plus clair,

Merci d'avoir passé un peu de temps sur mon pb

Amicalement,
Thierry

Ca marche presque
Le seul hic que j'ai, c'est que dans mon tableau, j'ai un autre tableau imbriqué comme dans l'exemple.
Donc pour chaque année, cela s'affiche et se masque sans soucis
mais lorsque dans mon tableau ainsi afficher, je clique sur un de mes mois, tout ce masque y compris mon mois
Je peux certainement exclure mes div qui sont du type:
Pour An2002  ça donne : Mo0210      Mo0211
Pour An2003  ça donne : Mo0305      Mo0306

J'ai copié le code java que j'ai nommé en 2 à la fin des trois fonctions.
Maintenant, il me reste à filtrer, peut on exclure par rapport au 2 première lettres par exemple?

Amicalement,
Thierry

J'utilise ce code java: