Afficher/Masquer un texte : Slide Toggle avec jQuery
L’effet Slide Toggle est un effet qui peut-être utile quand vous voulez masquer un texte en particulier, mais que vous souhaitez tout de même laisser la possibilité d’afficher/masquer celui-ci via un lien.
Vous pouvez voir un exemple sur cette page où le formulaire de contact est masqué par défaut, un simple clic sur contact vous permet de le révéler.
Activer jquery
Pour reproduire ceci vous allez avoir besoin d’accéder à votre fichier header.php afin de charger la bibliothèque jQuery via cet ajout avant wp_head entre les balises <head> de votre projet :
[pastacode lang= »php » message= » » highlight= » » provider= »manual »]
<?php wp_enqueue_script('jquery'); ?>[/pastacode]
Ensuite, 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 :
[pastacode lang= »php » message= » » highlight= » » provider= »manual »]
<script>
jQuery(document).ready(function() {
jQuery('#slideMe').hide();
jQuery('a#clickMe').click(function() {
jQuery('#slideMe').slideToggle(400);
return false;
});
});
</script>[/pastacode]
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
[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]
<a href="#" id="clickMe">Un lien</a>
<div id="slideMe">Texte masquer par défaut</div>[/pastacode]
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.
