Afficher cacher plusieurs objets d'un seul click

Commenter

Contenu du snippet

Bonjour à TOUTES et TOUS

Suite à une question sur le forum :
" est-il possible de faire apparaître plusieurs DIV avec un seul lien ?" la réponse est bien sur OUI...

Deux méthodes pour cela
- Créer une fonction spécifique répondant à notre demande
- Créer une fonction plus ou moins générique

C'est cette deuxième que je vous livre...
...elle ne différe en rien par rapport à une fonction standard si ce n'est que l'utilisation des arguments entre ici en compte, vous pouvez passer autant d'ID d'objet que JavaScript le permet...

Je vous joint un petit exemple simple pour Test.

Source / Exemple : 


<HTML>
<HEAD>
<TITLE>Cache Montre Elements[PetoleTeam]</TITLE>
<STYLE TYPE="text/css">
BODY{
  font-size:13px;
  font-family:Verdana;
}
</STYLE>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
 //----------------------------------------------
// Affichage d'un Objet déclaré dans le document...
//----------------------------------------------
function Affiche_OBJ(){
  var Arg = arguments;  // Récup liste des arguments passée à la fonction
  var Obj;
  for( var i=0; i< Arg.length; i++){               // On parcours la liste
    Obj = document.getElementById( Arg[i]); // Récup Objet correspondant
    if( Obj){
      Obj.style.visibility = "visible";
      //-- Ou autre méthode
      Obj.style.display = "";
    }
  }
}
//----------------------------------------------
// Masquage d'un Objet déclaré dans le document...
//----------------------------------------------
function Masque_OBJ(){
  var Arg = arguments;  // Récup liste des arguments passée à la fonction
  var Obj;
  for( var i=0; i< Arg.length; i++){               // On parcours la liste
    Obj = document.getElementById( Arg[i]); // Récup Objet correspondant
    if( Obj){
      Obj.style.visibility = "hidden";
      //-- Ou autre méthode
      Obj.style.display = "none";
    }
  }
}
</SCRIPT>
</HEAD>
<BODY>
<BR><A HREF="#" OnClick="Affiche_OBJ('OBJ_1', 'OBJ_2', 'OBJ3');">Affiche </A>DIV_1 OBJ_2 et DIV_3
<BR><A HREF="#" OnClick="Masque_OBJ('OBJ_1', 'OBJ_2', 'OBJ3');">Masque </A>DIV_1 OBJ_2 et DIV_3
<BR><A HREF="#" OnClick="Affiche_OBJ('LI_1', 'LI_3');">Affiche </A> LI_1 et LI_3
<BR><A HREF="#" OnClick="Masque_OBJ('LI_1', 'LI_3');">Masque </A> LI_1 et LI_3
<BR>
<BR><DIV ID="OBJ_1">Texte pour visualisation de OBJ_1...</DIV>
<BR><TABLE WIDTH="200" HEIGHT="100" BORDER="0"BGCOLOR="#FFCC00" ID="OBJ_2"><TR><TD>Ceci est l'objet OBJ_2</TD></TR></TABLE>
<BR><DIV ID="OBJ_3">Texte pour visualisation de OBJ_3...</DIV>
<UL>
  <LI ID="LI_1">Ligne 1</LI>
  <LI ID="LI_2">Ligne 2</LI>
  <LI ID="LI_3">Ligne 2</LI>
</UL>
</BODY>
</HTML>

Conclusion :


Au passage on peut noter les propriétes méconnus de arguments

1/ arguments.length
-> Nonbre d'argument passé à la fonction

2/arguments.callee
-> Chaîne de caractères des instructions de la fonction

3/ arguments.caller
-> Qui a demandé l'éxecution de la Fonction, celle la peut être très utile...

Aller bonne PROG

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (PetoleTeam)