Menu

Afficher/cacherRedirectionMVCFormulaireAspirateur fichiertest
Cinque Terre

Montrer ou cacher un bloc de texte

Pour afficher ou cacher un bloc, on utilise une petite fonction javascript à placé dans l'entête de votre document (entre <head et </head>) qui permet de "basculer" notre fameux "bloc" à l'état de "cacher" ou "montrer" grace à l'élément display en block ou none. 

Dans l'exemple ci-dessous, la fonction se nomme "bascule".

<script language="javascript" type="text/javascript">
function bascule(elem)
   {
   etat=document.getElementById(elem).style.display;
   if(etat=="none"){
   document.getElementById(elem).style.display="block";
   }
   else{
   document.getElementById(elem).style.display="none";
   }
   }
</script>

Voici comment on l'utilise :

<a href="" onclick="bascule('1'); return false;">Mon titre</a>
<div id='1' style='display:none;'>Mon texte</div>

L'évènement onclick (qui est ni plus ni moins qu'un lien) contient le nom de la fonction (bascule) avec en paramètre le nom de l'élément (1) que l'on souhaite faire basculer d'un mode à l'autre. Juste en dessous, un simple "div" avec un "id" unique qui reprend le nom de l'élément (1) et qui est caché grace au style css "display:none".

Pour une succession de "div", il suffit simplement de changer la valeur de la fonction bascule (1) et de l'id du "div" qui suit.

Un petit exemple avec une légère mise en forme :

<div style="border:1px solid green;margin:5px;padding:5px;">
<a href="" onclick="bascule('1'); return false;">Mon titre 1</a>
<div id='1' style='display:none;'>Mon texte 1</div>
</div>

<div style="border:1px solid green;margin:5px;padding:5px;">
<a href="" onclick="bascule('2'); return false;">Mon titre 2</a>
<div id='2' style='display:none;'>Mon texte 2</div>
</div>

<div style="border:1px solid green;margin:5px;padding:5px;">
<a href="" onclick="bascule('3'); return false;">Mon titre 3</a>
<div id='3' style='display:none;'>Mon texte 3</div>
</div>

Avec du css

Avec jquery

 vous devez insérer soit dans un fichier JavaScript, soit dans le thème directement après wp_head (<script>LE CODE</script>) le code suivant :

	<script>
	jQuery(document).ready(function() {
	jQuery('#slideMe').hide();
   	jQuery('a#clickMe').click(function() {
   		jQuery('#slideMe').slideToggle(400);
   		return false;
   	});
});
	</script>

Afficher / Masquer son texte

A partir de maintenant, vous n’avez plus qu’à spécifier dans n’importe quelle page ou article cette tournure afin d’appliquer votre effet Afficher/Masquer

<a href="#" id="clickMe">Un lien</a>
<div id="slideMe">Texte masquer par défaut</div>

Explication sur la méthode utilisée :

jQuery(‘#slideMe’).hide(); : permet de cacher votre div lorsque votre page est chargée. Remplacer .hide() par .show() si vous ne voulez pas faire disparaître votre div.

jQuery(‘#slideMe’).slideToggle(400); : permet l’effet visuel slide, 400 millisecondes d’animation est attribué, vous pouvez le changer.

Hadek site
'); }); }); 3779