Il y a quelques mois, je me suis amusé à transformer mon script javascript maison qui me permet d’afficher certaines zones de textes sur le site, notamment dans les articles de la catégorie Music/Séries.

Étant donné que jQuery est présent sur toutes les pages du site, j’ai adapté le script pour qu’il utilise jQuery. Cela fera aussi une librairie maison de moins à maintenir (et à charger).

Important : si vous voulez gérer plusieurs blocs, utilisez le script JQuery toggle pour afficher et cacher de multiples blocs HTML

Un script Javascript répondant à des besoins précis

J’écris pas mal de code afin de répondre à mes besoins sur le site, le but étant de me simplifier la vie au maximum.

Dans certains articles, il existe des zones de textes qui ne sont pas tout public et qui nécessitent une authentification préalable à leur lecture. La zone de texte doit apparaître lorsque l’on clique sur un des liens présents dans l’article.

Démo

Pour voir ce script en action, il suffit de cliquer sur ce lien.

Ce texte apparaît et disparaît grâce à un script javascript
écrit pour jQuery et qui utilise la fonction toggle().

Le script

1. Commencez par inclure jQuery dans l’entête de votre page (head) – comme ceci:

<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
</head>

2. Ensuite, il ne vous reste plus qu’à inclure le script dans le corps de votre page (body) :

<script>
/* <![CDATA[ */ 
/*
|-----------------------------------------------------------------------
|  jQuery Toggle Script by Matt - skyminds.net
|-----------------------------------------------------------------------
|
| Affiche/cache le contenu d'un bloc une fois qu'un lien est cliqué.
|
*/

// On attend que la page soit chargée 
jQuery(document).ready(function()
{
   // On cache la zone de texte
   jQuery('#toggle').hide();
   // toggle() lorsque le lien avec l'ID #toggler est cliqué
   jQuery('a#toggler').click(function()
  {
      jQuery('#toggle').toggle(400);
      return false;
   });
});
/* ]]> */ 
</script>

3. Voici maintenant le code HTML à placer dans votre page. Commençons par le lien :

<a href="#" id="toggler">Cliquez sur ce lien</a>.

4. On enchaîne avec la zone de texte :

<div id="toggle">Ce texte apparaît grâce à un script javascript écrit pour jQuery et utilise la fonction toggle().</div>

5. Il ne vous reste plus qu’à ajouter une ligne de CSS pour styliser l’ID #toggle :


#toggle{height:auto; background:#eee; border:1px solid #900; margin:1em;text-align:center}
#toggle p{text-align:center;padding:0}

Explications

Le script en lui-même est toujours aussi simple : le contenu du bloc est caché par défaut au chargement de la page. Lorsque le visiteur clique sur le lien, le contenu est affiché avec un petit effet coulissant.

A lire :  16 dépôts Cydia pour votre iPhone ou iPod Touch

Simple et efficace.

Important : si vous voulez gérer plusieurs blocs, utilisez le script jQuery toggle pour afficher et cacher de multiples blocs HTML

Pour développer votre projet WordPress ou Woocommerce, faites appel à mon expertise pour réaliser un site rapide, performant et fonctionnel.

Contactez-moi

Si vous avez trouvé une faute d’orthographe, informez-nous en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée s’il vous plaît.

Articles en rapport:

jQuery : script utilisant la fonction toggle pour afficher ou cacher un bloc HTML

par Matt Lecture: 1 min

Pin It on Pinterest

Share This

Spelling error report

The following text will be sent to our editors: