Afficher ou cacher un composant avec javascript

Soyez le premier à donner votre avis sur cette source.

Snippet vu 12 613 fois - Téléchargée 16 fois

Contenu du snippet

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 / Exemple :


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

A voir également

Ajouter un commentaire Commentaires
Messages postés
5
Date d'inscription
mardi 25 novembre 2008
Statut
Membre
Dernière intervention
25 mai 2010

Merci génial j'en cherchait un depuis longtemps
Messages postés
36
Date d'inscription
vendredi 6 janvier 2006
Statut
Membre
Dernière intervention
27 février 2009

Il a tu moyen qu'il fonctionne sous IE 7 et Firefox merci !!!
Messages postés
1771
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
20 novembre 2020
107
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
Messages postés
5
Date d'inscription
mercredi 19 novembre 2008
Statut
Membre
Dernière intervention
24 novembre 2008

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 !
Messages postés
215
Date d'inscription
dimanche 20 février 2005
Statut
Membre
Dernière intervention
10 mars 2014

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 = 'Cacher'; // CHANGE "AFFICHER" EN "CACHER"
Afficher les 6 commentaires

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.