1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Afficher cacher plusieurs objets d'un seul click

Afficher cacher plusieurs objets d'un seul click

Soyez le premier à donner votre avis sur cette source.

Snippet vu 27 408 fois - Téléchargée 26 fois

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

Ajouter un commentaire Commentaires
Signaler
Messages postés
1
Date d'inscription
jeudi 27 mai 2010
Statut
Membre
Dernière intervention
9 juillet 2010
Merci pour ce script il ma rendu Service =D
Signaler
Messages postés
2
Date d'inscription
jeudi 14 décembre 2006
Statut
Membre
Dernière intervention
20 avril 2010
Bon boulot, même en 2010, il sert encore...
En faite j'arrivais à cacher ou à montrer div par div, mais j'avais pas su faire le reste...

Bonne continuation.
Signaler
Messages postés
2
Date d'inscription
mardi 29 juillet 2003
Statut
Membre
Dernière intervention
10 juin 2010
Super ! Bon travail, c'est simple , très bien expliqué et c'est tout à fait ce que je cherchais. Merci
Signaler
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 14
Bonjour,
Je ne saisi pas tout ce que tu veux faire. S'agit-il de frame, de DIV à recharger, via AJAX seulement...
Le plus sur serait de poser ta question sur le Forum en veillant bien à être le plus clair possible.

;0)
Signaler
Messages postés
3
Date d'inscription
lundi 12 janvier 2004
Statut
Membre
Dernière intervention
16 juillet 2008
Bonjour,

j'avance petit a petit dans mon code 8-)
cette div affiche son contenu via un id, mais vu que l'id peut changer à chaque clic j'aimerai faire un reload de cette div.
j'ai tenté plusieurs écritures qui ne fonctionne pas pour l'instant :

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 = parent.document.getElementById( Arg[i]); // Récup Objet correspondant
if( Obj){
Obj.style.visibility = "visible";
//-- Ou autre méthode
Obj.window.location.reload(true);
Obj.style.display = "block";

}
}
}

merci beaucoup de l'aide
Afficher les 14 commentaires
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)