web-dev-qa-db-fra.com

Comment utiliser "afficher plus" sur une page ou une publication pour afficher et masquer le contenu

Que faire si vous souhaitez utiliser le bouton "WYSIWYG" intégré show more, pour masquer et afficher du texte dans un message ou une page?

J'ai commencé avec une mauvaise compréhension de la fonction. Je pensais que la fonction était réellement destinée à ce dont j'avais besoin, à savoir masquer une partie du contenu au chargement, avec un bouton "lire plus" qui afficherait le contenu restant après avoir cliqué dessus.

Cependant, cela ne semblait pas être le cas, ce qui m'a amené à chercher une solution pour l'utiliser de toute façon. Vous pourriez dire, de l'utiliser comme je le voulais.

Comme je ne pouvais pas trouver de solution en ligne, je devais commencer à développer ma propre solution, qui avec juste un peu de jQuery s’est révélée exactement comme je le voulais.

Note Si vous utilisez la balise read-more telle qu'elle était destinée (pour montrer quelle partie du texte devait être affichée comme un teaser sur la page d'accueil/archive, etc.), vous ne pourrez pas l'utiliser. solution telle quelle. Il y a cependant une solution facile à cela avec un peu de HTML, que je vais ajouter au bas de ma réponse.

jqueryread-more
1
Rvervuurt

Toute publication contenant une balise "read more" avait une balise <p>- avec dans une span avec une ID appelée more-#, où # pouvait être n'importe quel nombre. Cela ressemble à ceci:

<p>
   <span id="more-1"></span>
</p>

Je devais sélectionner cette plage spécifique et la stocker dans une variable:

var $showMore = $('span[id*="more-"]');

Pour ajouter du texte au show more- span, j'ai utilisé .html() de jQuery:

$showMore.html("Read more <i class='icon-down-open-big'></i>");

Bien sûr, toutAPRÈSla balise read more- devait être masqué lors du chargement, ce qui peut être fait en remontant d'un niveau (en utilisant .parent()), puis en sélectionnant tous les blocs suivants de ce parent. Cela peut être fait avec .nextAll(), qui sélectionne tous les blocs après le bloc actuel (bien sûr jusqu'à la fermeture du bloc parent).

Etant donné que cette sélection sera utilisée plus tard, je l'ai également stockée dans une variable:

var $showMoreNext = $showMore.parent().nextAll();

À présent, nous avions tous les sélecteurs. Tout ce que nous avions à faire, c’était de le cacher au chargement et de l’afficher lorsque Read more était cliqué.

$showMoreNext.hide(); // to hide all elements after the Read more tag

$showMore.on('click', function() {
   $showMoreNext.toggle("slow");
});

La toggle permet de cliquer à nouveau sur la balise et de masquer tout le contenu masqué à l'origine.

Donc, tout ce dont vous avez besoin pour créer une extension semblable à un accordéon après l'input "read more" de Wordpress, est le bit suivant de jQuery:

var $showMore = $('span[id*="more-"]');
$showMore.html("Læs mere <i class='icon-down-open-big'></i>");
var $showMoreNext = $showMore.parent().nextAll();
$showMoreNext.hide();

$showMore.on('click', function() {
  $showMoreNext.toggle("slow");
});

Maintenant, que se passe-t-il si vous utilisez déjà la fonction "read more"?

Il y a deux solutions possibles:

1) Vous n'incluez le jQuery ci-dessus que sur les pages où vous souhaitez "abuser" de la balise "En savoir plus" 2) Vous créez un petit morceau de code HTML que vous placez dans votre texte à l'endroit souhaité. Assurez-vous simplement d’adapter jQuery en conséquence.

1
Rvervuurt