begin process at 2012 05 28 07:36:57
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Classé sous :Afficher div, Cacher div, javascript cacher, div javascript, display javascript Niveau :Débutant Date de création :19/11/2008 Date de mise à jour :19/11/2008 20:50:52 Vu :7 686
Auteur : CodeurleGeek

Ecrire un message privé
Commentaire sur cette source (6)
Ajouter un commentaire et/ou une note

 Description

Ceci est mon premier post, alors soyez indulgents svp !

Ce script sert à cacher puis à afficher de nouveau des morceaux de page. Il suffit pour cela de placer un marqueur "id" sur n'importe quel élément html (<img>, <div>, ect...), de lui attribuer un numéro non utilisé et de créer un lien pour activer la fonction.

Faire de cette manière :

<a onclick="AfficherOuCacher('1');" style="cursor:pointer;" id="boutton1">Afficher</a> (1 correspond au nombre de l'élément)

<img src="image.png" style="display:none;" id="1">

<a onclick="AfficherOuCacher('2');" style="cursor:pointer;" id="boutton2">Afficher</a> (2 correspond au nombre de l'élément)

<div style="display:none;" id="2">Div 2</div>

IMPORTANT : ne pas enlever style="display:none;", sinon, l'élément sera visible dès l' affichage de la page.


Source

  • <head>
  • <script type="text/javascript">
  • Visible = false; // LE COMPOSANT A AFFICHER EST CACHE
  • function AfficherOuCacher(obj)
  • {
  • if (Visible == false) // SI L'OBJET N'EST PAS VISIBLE
  • {
  • Afficher(obj) // RENVOIE A LA FONCTION AFFICHER
  • }
  • else // SINON
  • {
  • Cacher(obj) // RENVOIE A LA FONCTION CACHER
  • }
  • }
  • function Afficher(obj)
  • {
  • var id = 'boutton'+obj;
  • document.getElementById(obj).style.display = ''; // AFFICHE LE COMPOSANT
  • document.getElementById(id).innerHTML = '<a onclick="AfficherOuCacher();" style="cursor:pointer;" id="'+id+'">Cacher</a>'; // CHANGE "AFFICHER" EN "CACHER"
  • Visible = true; // OBJET EST MAINTENANT VISIBLE
  • }
  • function Cacher(obj)
  • {
  • var id = 'boutton'+obj;
  • document.getElementById(obj).style.display = 'none'; // CACHE LE COMPOSANT
  • document.getElementById(id).innerHTML = '<a onclick="AfficherOuCacher();" style="cursor:pointer;" id="'+id+'">Afficher</a>'; // CHANGE "CACHER" EN "AFICHER"
  • Visible = false; // OBJET EST MAINTENANT CACHE
  • }
  • </script>
  • </head>
  • <body>
  • <a onclick="AfficherOuCacher('1');" style="cursor:pointer;" id="boutton1">Afficher</a>
  • <div id="1" style="display:none;">Div avec id 1</div>
  • <a onclick="AfficherOuCacher('2');" style="cursor:pointer;" id="boutton2">Afficher</a>
  • <iframe src="http://wwww.google.fr" width="100%" height="45%" id="2" style="display:none;border:0px"></iframe>
  • </body> 
<head>

<script type="text/javascript">

Visible = false; // LE COMPOSANT A AFFICHER EST CACHE

function AfficherOuCacher(obj)
	{
	if (Visible == false) // SI L'OBJET N'EST PAS VISIBLE
		{
		Afficher(obj) // RENVOIE A LA FONCTION AFFICHER
		}
	else // SINON
		{
		Cacher(obj) // RENVOIE A LA FONCTION CACHER
		}
	}

function Afficher(obj)
	{
	var id = 'boutton'+obj;
	document.getElementById(obj).style.display = ''; // AFFICHE LE COMPOSANT
	document.getElementById(id).innerHTML = '<a onclick="AfficherOuCacher();" style="cursor:pointer;" id="'+id+'">Cacher</a>'; // CHANGE "AFFICHER" EN "CACHER"
	Visible = true; // OBJET EST MAINTENANT VISIBLE
	}
	
function Cacher(obj)
	{
	var id = 'boutton'+obj;
	document.getElementById(obj).style.display = 'none'; // CACHE LE COMPOSANT
	document.getElementById(id).innerHTML = '<a onclick="AfficherOuCacher();" style="cursor:pointer;" id="'+id+'">Afficher</a>'; // CHANGE "CACHER" EN "AFICHER"
	Visible = false; // OBJET EST MAINTENANT CACHE
	}
	
</script>

</head>

<body>


<a onclick="AfficherOuCacher('1');" style="cursor:pointer;" id="boutton1">Afficher</a>

<div id="1" style="display:none;">Div avec id 1</div>


<a onclick="AfficherOuCacher('2');" style="cursor:pointer;" id="boutton2">Afficher</a>
<iframe src="http://wwww.google.fr" width="100%" height="45%" id="2" style="display:none;border:0px"></iframe>



</body>

 Conclusion

Suggestions et commentaires sont les bienvenus. Merci de votre participation et de votre indulgence !


 Historique

19 novembre 2008 20:50:52 :
Je signale qu'il y a un bug sous IE 7, ça ne marche que sur Firefox.

 Sources du même auteur

API GOOGLE TRADUCTION
COOKIES EN JAVASCRIPT
CARTE GOOGLE MAPS
LES TOURS DE HANOÏ
CRÉATION D'ÉCHIQUIER AVEC JAVASCRIPT
Toutes les sources de CodeurleGeek

 Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

Commentaires et avis

Commentaire de Kimjoa le 19/11/2008 21:21:34

salut, y a un beug , tu déclare qu'une seule variable globale (Visible), qui retient l'état de deux objet HTML, tu'aurais dut en faire 2 , voir aucune...
voici comment.

// pour les boutons
<a onclick="manageVisibility('id du composant a modifier');" style="cursor:pointer;" id="boutton1">Afficher</a>

// pour la fonction

function manageVisibility(id){
   var element=document.getElementById(obj);/*on créer une reference de l'element html , car on utilise deux fois getElementById, une fois comme test et une autre pour appliqué le display */
   if(element.style.display=='none'){
      element.style.display==''
   }else{
      element.style.display=='none'
   }
}

a noter que cette fonction (que j'ai pas testé ) ne marche que si le style par default est appliqué dans la balise, sinon on aurait du passé par une fonction pour recupérer la propriété du css, pour firefox celle si est document.defaultView.getComputedStyle(element, null).getPropertyValue('display'), pour ie ,element.currentStyle[rule], je m'arrette la fait une recherche pour la syntax ect ..
bonne continuation bye

Commentaire de petifa le 20/11/2008 12:38:16

dans ton cas il ne serait pas plus judicieux de changer le contenu de la balise A du lien que tu viens de cliquer : c'est à dire changer "Cacher" en "Afficher" ...

#  document.getElementById(id).innerHTML = '<a onclick="AfficherOuCacher();" style="cursor:pointer;" id="'+id+'">Cacher</a>'; // CHANGE "AFFICHER" EN "CACHER"



Commentaire de CodeurleGeek le 20/11/2008 20:32:19

Merci à vous deux !

Kimjoa : pourrai-tu réexpliquer s'il te plait (je n'ai pas trop compris, dsl).

Encore merci pour votre participation et a bientôt !

Commentaire de kazma le 22/11/2008 11:07:53 administrateur CS

il me semble qu'une fonction dans ce genre serait plus simple

function manageVisibility(id,bouton){
if (document.getElementById(obj).style.display = ''){
document.getElementById(obj).style.display = 'none'
document.getElementById(bouton).nodevalue="montrer"
}
else{
document.getElementById(obj).style.display = 'none'
document.getElementById(bouton).nodevalue="cacher"
}
}

et sinon il faut eviter de cree un style dans la page
il vaut mieux utilise des feuilles de style et utilise dans le script getComputedStyle et currentStyle

Commentaire de niceman23 le 27/02/2009 20:25:41

Il a tu moyen qu'il fonctionne sous IE 7 et Firefox merci !!!

Commentaire de louisdsm le 02/08/2009 20:45:55 10/10

Merci génial j'en cherchait un depuis longtemps

 Ajouter un commentaire

Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
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 : 0,780 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)