Afficher ou cacher un composant avec javascript

Commenter

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

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 (CodeurleGeek)