JavaScript Afficher/Masquer

Il est possible d'afficher ou de masquer un contenu d'une page web avec le JavaScript. Il est d'usage de mettre un texte (afficher/Masquer) sur lequel on met un lien qui permet d'afficher ou de masquer un texte

Exemple d'affichage et de masquage d'un texte lors d'un clic sur un lien ou un bouton

 

Pour le premier bouton

Ce qui a pour conséquence que le bloc contenant le texte disparait avec display='none' et reprend son espace avec display='block'

 

Pour le second bouton

Ce qui a pour conséquence que le texte disparait avec l'utilisation de visibility="hidden" MAIS l'espace pris par le bloc reste. On fait réapparaitre le texte avec visibility="visible"

 

 



<!DOCTYPE html>
<html>

<head>

	<script>

	function afficher_Masquer1(id)
		{
			if(document.getElementById(id).style.visibility=="hidden")
				{
					document.getElementById(id).style.visibility="visible";
					document.getElementById(id).style.display="block";
					document.getElementById('bouton_'+id).value='Masquer le bloc';
				}
			else
				{
					document.getElementById(id).style.visibility="hidden";
					document.getElementById(id).style.display="none";
					document.getElementById('bouton_'+id).value='Afficher le bloc';
				}
			return true;
		}


	function afficher_Masquer2(id)
		{
			document.getElementById(id).style.display="block";

			if(document.getElementById(id).style.visibility=="hidden")
				{
					document.getElementById(id).style.visibility="visible";
					document.getElementById('bouton2_'+id).value='Masquer le texte';
				}
			else
				{
					document.getElementById(id).style.visibility="hidden";
					document.getElementById('bouton2_'+id).value='Afficher le texte';
				}
			return true;
		}

	</script>

</head>


<body>

	<input type="button" class="bouton" id="bouton_texte" 
			onclick="afficher_Masquer1('texte');" value="Masquer le bloc" />

	<input type="button" class="bouton" id="bouton2_texte" 
			onClick="afficher_Masquer2('texte');" value="Masquer le texte" />

	<div id="texte">
		Tamiser la farine et le sucre dans un saladier. 
		Ajouter le beurre souple en petites parcelles. 
		Mélanger l'ensemble avec les mains pour que tous les morceaux de beurre soient enrobés de farine. 
		Les écraser pour obtenir un sablage. Faire un puits. 
		Y ajouter l'oeuf légèrement battu avec le sel. 
		Incorporer progressivement le sablage. 
		Mélanger jusqu’à obtention d’une pâte homogène, sans pétrir. 
		Faire une boule et la fariner légèrement. 
		Envelopper dans du film étirable et réserver au frais minimum 30 minutes.
	</div>

</body>

</html>
Voir