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 :

  

2. Ajoutez le script dans le corps de votre page, juste avant /body :

3. Le code HTML avec vos blocs de texte :

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

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

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():

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:

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

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é:

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.

Vous souhaitez réaliser un nouveau projet WordPress ou WooCommerce, ou ajouter de nouvelles fonctionnalités? Ou améliorer les performances de votre site?

Parlons de votre projet »

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

Spelling error report

The following text will be sent to our editors: