jqueryJ’ai écrit il y a quelques temps un script jQuery utilisant la fonction toggle pour afficher/cacher un seul bloc HTML mais pas mal de gens m’ont demandé comment faire pour afficher plusieurs blocs HTML .

Voici comment s’y prendre, en utilisant les fonctions jQuery .slideup(), .slidedown() et .closest().

Démo


Article A

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Article B

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Article C
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Le script

1. Ajoutez 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. Ajoutez le script dans le corps de votre page, juste avant /body :

<script>/* <![CDATA[ */
/*
|-----------------------------------------------------------------------
|  jQuery Multiple Toggle Script by Matt - www.skyminds.net
|-----------------------------------------------------------------------
|
| Affiche et cache le contenu de blocs multiples.
|
*/
jQuery(document).ready(function() {
    $(".more").hide();
    jQuery('.button-read-more').click(function () {
        $(this).closest('.less').addClass('active');
        $(this).closest(".less").prev().stop(true).slideDown("1000");
    });
    jQuery('.button-read-less').click(function () {
        $(this).closest('.less').removeClass('active');
        $(this).closest(".less").prev().stop(true).slideUp("1000");
    });
});
/* ]]> */ </script>

3. Le code HTML avec vos blocs de texte :

<strong>Article A</strong>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="toggle">
    <div class="more">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    </div>
    
    <div class="less">
        <a class="button-read-more button-read" href="#read">Lire la suite</a>
        <a class="button-read-less button-read" href="#read">Replier</a>
    </div>
</div>

<strong>Article B</strong>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="toggle">
    <div class="more">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    </div>
    
    <div class="less">
        <a class="button-read-more button-read" href="#read">Lire la suite</a>
        <a class="button-read-less button-read" href="#read">Replier</a>
    </div>
</div>

<strong>Article C</strong>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div class="toggle">
        <div class="more">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    </div>
    
    <div class="less">
        <a class="button-read-more button-read" href="#read">Lire la suite</a>
        <a class="button-read-less button-read" href="#read">Replier</a>
    </div>
</div>

4. Le code CSS, à styliser selon vos goûts et envies :

<style>
.less.active .button-read-more, .button-read-less  {display: none}
.less.active .button-read-less {display: block}
.more {margin-top: 10px}
.more p {margin: 0;padding: 0}
</style>

Et si on voulait que le bloc s’affiche dessous ?

Dans les commentaires, bilboquet m’a demandé comment faire pour que le bloc de texte s’affiche en-dessous du lien pour voir la suite. Voici ce qu’il faut modifier au code précédent :

a. Dans le script jQuery, il faut remplacer les instances prev() par next():

<script>/* <![CDATA[ */
/*
|-----------------------------------------------------------------------
|  jQuery Multiple Toggle Script by Matt - www.skyminds.net
|-----------------------------------------------------------------------
|
| Affiche et cache le contenu de blocs multiples. Bloc après le texte.
|
*/
jQuery(document).ready(function() {
    $(".more").hide();
    jQuery('.button-read-more').click(function () {
        $(this).closest('.less').addClass('active');
        $(this).closest(".less").next().stop(true).slideDown("1000");
    });
    jQuery('.button-read-less').click(function () {
        $(this).closest('.less').removeClass('active');
        $(this).closest(".less").next().stop(true).slideUp("1000");
    });
});
/* ]]> */ </script>

Cela veut dire qu’au lieu de remonter dans l’arbre DOM pour trouver l’élément le plus proche avec la fonction prev(), le script va descendre avec la fonction next().

b. Cela signifie également que la structure du code HTML doit être modifiée, le bloc de texte caché doit maintenant se trouver après les liens qui montrent ou cachent le bloc:

<strong>Article A</strong>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="toggle">
    <div class="less">
        <a class="button-read-more button-read" href="#read">Lire la suite</a>
        <a class="button-read-less button-read" href="#read">Replier</a>
    </div>
    <div class="more">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
    </div>
</div>

c. Voici un exemple de démonstration :


Article A

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

N’ouvrir qu’un seul élément à la fois

Si vous ne souhaitez n’ouvrir qu’un seul élément à la fois, il suffit d’ajouter une ligne qui ferme tous les éléments lorsque l’on clique sur le lien:

 $('.more').hide();

Code javascript modifié:

<script>/* <![CDATA[ */
/*
|-----------------------------------------------------------------------
|  jQuery Multiple Toggle Script, one at a time by Matt - www.skyminds.net
|-----------------------------------------------------------------------
|
| Affiche et cache le contenu de blocs multiples. Bloc après le texte. 
| Un seul élément à la fois.
|
*/
jQuery(document).ready(function() {
    $(".more").hide();
    jQuery('.button-read-more').click(function () {
	 // one at a time
	 $('.more').hide();
	 $('.less').removeClass('active');
        //
        $(this).closest('.less').addClass('active');
        $(this).closest(".less").next().stop(true).slideDown("1000");
    });
    jQuery('.button-read-less').click(function () {
        $(this).closest('.less').removeClass('active');
        $(this).closest(".less").next().stop(true).slideUp("1000");
    });
});
/* ]]> */ </script>

Explications

On crée un bloc avec la classe toggle qui contient deux autres blocs : un bloc avec une classe more qui est cachée par défaut et qui contient le texte à montrer, et un bloc avec la classe less qui contient les liens “Lire la suite” (lorsque le bloc est caché) et “Replier” (lorsque le bloc est visible).

Le script utilise la fonction .closest() pour trouver l’élément le plus proche à montrer ou à cacher et les fonctions .slideup() et .slidedown() pour rendre visible ou non les blocs.

Avec prev(), le script affiche l’élément qui se trouve au-dessus (on remonte l’arbre DOM). Dans le second exemple, avec next(), le script affiche le bloc qui vient après (on descend l’arbre DOM).

En espérant que cela puisse vous être utile.

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 toggle pour afficher et cacher de multiples blocs HTML

par Matt Lecture: 5 min

Pin It on Pinterest

Share This

Spelling error report

The following text will be sent to our editors: