begin process at 2012 02 14 09:14:30
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Divers

 > AFFICHER CACHER PLUSIEURS OBJETS D'UN SEUL CLICK

AFFICHER CACHER PLUSIEURS OBJETS D'UN SEUL CLICK


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Divers Classé sous :afficher, cacher Niveau :Débutant Date de création :19/07/2006 Vu :23 550

Auteur : PetoleTeam

Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (14)
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


 Sources du même auteur

Source avec Zip CLEAR D'UN INPUT FILE
Source avec Zip FONCTION ALERT ET LES ACCENTS
Source avec Zip LECTURE ET RÉCUPÉRATION DES LIGNES D'UN FICHIER TEXTE
Source avec Zip Source avec une capture RECHERCHE ET COLORISATION, MISE EN SURBRILLANCE
Source avec Zip DIV QUI SUIT LE SCROLLING DE LA PAGE

 Sources de la même categorie

COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol
Source avec Zip Source avec une capture HTML5 PLAYER par kazma
Source avec Zip Source avec une capture SCROLLBAR PERSONNALISABLE par kazma
Source avec Zip INFO BULLE par RudiRatlos

 Sources en rapport avec celle ci

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx
MONTRER/CACHER UN DIV par keket
CACHER LES ADRESSES EMAILS AVEC UN BOUTON VIA UN POPUP: par jeepjeep14
AFFICHER DATE ET HEURE ACTUELLE (SCRIPT TRES LÉGER ET SIMPL... par lelougarou
Source avec Zip TEXTES CLIGNOTANTS ET AFFICHAGE DU TEMPS PASSÉ DEPUIS LA DÉB... par ndubien

Commentaires et avis

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.

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>

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

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 !

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)

Commentaire de tomn le 21/08/2007 11:22:19

Merci beaucoup !

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

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)

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


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

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)

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

Commentaire de driman le 20/04/2010 11:28:39

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.

Commentaire de aurus1212 le 09/07/2010 12:36:31

Merci pour ce script il ma rendu Service =D

 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 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 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 Afficher des emails cacher sur un site [ par Airmouss ] Bonjour, Avant, tout d'abord je me présente Airmouss 23 ans de Montpellier 34 dans le languedoc roussillon le plus belle région de France quoi lol .  Afficher / Cacher Div [ par verajor ] Bonjour ( du moins bonsoir ). Voila je me permet de faire appel à votre aide car je pédale dans la semoule. J'aimerai affcher/cacher des div d'un sim


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,309 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales