Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

AFFICHER CACHER PLUSIEURS OBJETS D'UN SEUL CLICK


Information sur la source

Catégorie :Divers Classé sous : afficher, cacher Niveau : Débutant Date de création : 19/07/2006 Vu : 11 814

Note :
9,5 / 10 - par 2 personnes
9,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (12)
Ajouter un commentaire et/ou une note


Description

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

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

Commentaires et avis

signaler à un administrateur
Commentaire de golbenj le 24/08/2006 00:59:56

Bonjour je voudrais savoir comment on fait pour créer un lien sur une page web vers une autre page web? merci de me répondre au plus vite si possible.

signaler à un administrateur
Commentaire de PetoleTeam le 24/08/2006 08:15:27

Bonjour...
Tout d'abord bizarre la question n'a aucun rapport avec la source déposée, il vaut mieux poser celle ci dans le FORUM si tu veux une réponse rapide de surcroit..
Une petite réponse rapide donc
<A HREF="lapage.htm">atteindre la page</A>

signaler à un administrateur
Commentaire de Thbraun le 01/12/2006 16:58:33

Bonjour,
Moi cela me convient bien
c'est simple, mais jomme d'autre je débute

signaler à un administrateur
Commentaire de tomn le 16/08/2007 12:24:52

Comment faire pour que quand on charge la page, tout soit masqué (OBJ_1, OBJ_2, ...) ?

Sinon merci pour le code !

signaler à un administrateur
Commentaire de PetoleTeam le 20/08/2007 18:20:37

Bonjour,
Il te suffit de rajouter pour chaque OBJ que tu ne veux pas voir au départ un style comme suit
exemple :
<div id="OBJ_1" style="display:none">blabla</div>
ou
<div id="OBJ_1" style="visibility:hidden">blabla</div>
suivant la méthode utilisée...

;0)

signaler à un administrateur
Commentaire de tomn le 21/08/2007 11:22:19

Merci beaucoup !

signaler à un administrateur
Commentaire de murdokland le 09/07/2008 12:22:33

bonjour ,

tout d'abord merci pour ce code. j'aimerai le mettre dans une de mes sources mais j'ai un souci de level je pense.
mon fichier espace.php fait appel à un iframe (qui charge box2.php), c'est dans cette iframe que mon lien sera cliquable pour ouvrir une div situé au niveau de la page espace.php.

comment peut on joué sur les différent niveau?
merci beaucoup

signaler à un administrateur
Commentaire de PetoleTeam le 15/07/2008 13:12:41

Bonjour,
Pour peu que la fonction soit dans la page contenue dans l'IFRAME, il suffit de mettre parent devant document.getElementById
soit un truc du style :
  Obj = parent.document.getElementById( Arg[i]); // Récup Objet correspondant

;O)

signaler à un administrateur
Commentaire de murdokland le 15/07/2008 13:55:51

Merci beaucoup! j'ai rajouté aussi  Obj.style.display = "block";
cela ma enlever une sacrée épine du pied!

a bientot


signaler à un administrateur
Commentaire de murdokland le 16/07/2008 12:18:41

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

signaler à un administrateur
Commentaire de PetoleTeam le 21/07/2008 22:20:52

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 à un administrateur
Commentaire de cryoxyde le 03/09/2008 11:02:13 10/10

Super ! Bon travail, c'est simple , très bien expliqué et c'est tout à fait ce que je cherchais. Merci

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

afficher et cacher des éléments [ par aasnf ] Comment Cacher/afficher du texte Onclik ? [ par Danimoth ] Bonjour, J'aimerais cacher un bloc de html et l'afficher quand l'utilisateur clique sur un (+). blabla (+) On peut jouer &#224; la guerre, mais la gu Fonction javascript afficher/cacher [ par worstangel ] Création d'un bouton + pour afficher / cacher un texte [ par matou84 ] Bonjour &#224; tousje recherche le moyen d'afficher ainsi que de cacher un texte via un bouton + ( + afficher le texte / - le cacher ).L'exemple parfa Afficher/Cacher dans une arborescence [ par julex ] Bonjour, voila mon probleme : Sur mon site, j'ai mis un service qui permet d'explorer un ftp. Une page en php s'en occupe, et renvoi les résultats dan Afficher / cacher Objet [ par mecsensible ] BonsoirJ'aimerai réaliser le même effet  de + ET - (image)et cacher toute la cellule du tableau  comme sur le site www.codes-sources.com/<img src="htt Afficher Cacher une calque [ par moha007 ] Bonjour les amisj'ai besoin de votre aide s'il vous plaît:dans mon site, j'ai mis une Barre de navigation qui contient:des menus et des sous menus:Men probleme clic avec une fonction afficher cacher une div [ par nicooooooooooooooo2006 ] Bonjour à tous,Mon probleme est que j'ai repris une fonction permettant de cacher ou d'afficher une div suivant un lien cliquer il fonctionne mais mal Prolème Masquage/Affichage [ par daan53 ] Bonjour, Je débutte en JavaScript, et j'ai fait un script long et répétitif qui ne sert que à afficher et cacher. Le but est de cacher/afficher des é afficher le resultat d un module dans un autre:getelementbyid? [ par hkahil ] bonjourvoila je travailler sur des fichier htmljai des donnee dans mon code html que j insere dans des modulesjaimerais afficher le resultat d un modu


Nos sponsors

Sondage...

CalendriCode

Décembre 2008
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,312 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.