Petite astuce du jour pour ajouter un lien "Lire plus" et "Lire moins" dans un texte complexe. Simplement avec jQuery, HTML et CSS. Le but étant de couper le texte après un certains nombre de mots au choix, et d'afficher la suite du texte au clic sur un lien.
Un exemple vaut mieux que milles mots, alors vous pouvez jouer avec le CodePen ci-dessous pour comprendre là on nous allons en venir :
See the Pen jQuery readmore with splitted paragraph text by Tibow (@Tibow) on CodePen.
Quelques explications du code :
- Le texte est coupé après n'importe quel nombre de mots, puis est suivi de '…'
- Au clic sur Read more les "…" disparaissent et sont remplacés par un espace.
- Le lien Read more devient Read less et le reste du texte se place naturellement à la suite du paragraphe initialement coupé.
Pour changer le nombre de mots avant la coupure, modifiez dans l'onglet JS du CodePen ci-dessus, la valeur "50" par celle souhaitée. Attention, elle est présente deux fois dans le code sous la formule html.slice(0,50).
N'hésitez pas à cliquer sur le "Edit on Codepen" pour voir le code en pleine largeur d'écran et le manipuler à souhait.
Have fun 😎
Si cet article vous a aidé, lâchez votre plus bel applaudissement en remerciement ! 🤗