readmore ~ volet déroulant "lire la suite"

Pour faciliter et alléger un article, il est souvent utile de masquer du texte ou des images.

🆙 readmore : afficher/cacher un bloc HTML à l'aide d'un bouton 'lire la suite'

Cliquer pour lire la documentation

syntaxe:
{up readmore=texte bouton | textless=replier} contenu caché {/up readmore}
@author: Lomart @version: UP-1.0 @license: GNU/GPLv3 @credit: script de Matt @tags: layout-dynamic
  • readmore: idem textmore

Texte des boutons

  • textmore = lire la suite: texte bouton OUVRIR
  • textless = replier: texte bouton FERMER

Style des boutons

  • textmore-style: classe et style pour le bouton OUVRIR
  • textmore-class: classe et style pour le bouton OUVRIR
  • textless-style: classe et style pour le bouton FERMER
  • textless-class: classe et style pour le bouton FERMER

Style pour le panneau contenu

  • panel-style: classes et style pour le contenu (v2.6)

Style CSS des boutons

  • id: identifiant
  • class = uprm-btn: classe(s) pour les boutons OUVRIR et FERMER
  • style: idem
Version 2.6
ajout option panel-style pour mettre en évidence le contenu
Version 2.9
ajout options textmore-class et textless-class pour styler le bloc enfant du bouton.
Voir les nouveautésreplier

Utilisation minimaliste

{up readmore}
... le contenu masqué ...
{/up readmore}

affiche ce bouton sur toute la largeur de l'article qui permet d'affichier un contenu masqué.

... le contenu masqué ...
lire la suitereplier

Options

{up readmore=lang[fr=Cliquer pour voir les explications;en=Click for more information]
    | textless=c'est bon, j'ai compris
    | class=btn btn-primary 
    | panel-style=bg-jauneClair bd-gris p1}
... le contenu masqué ...
{/up readmore}
readmore
le libellé du bouton quand le contenu est masqué *
textless
le libellé du bouton quand le contenu est visible *
class / style
classe(s) pour personnaliser les boutons. Remplace le style par défaut
textmore-class, textmore-style, textless-class, textless-style
classe(s) et stylle inline pour personnaliser séparément les boutons more et less
panel-style
classe(s) et style pour mettre en évidence le contenu (v2.6)

* Les traductions optionnelles sont indiquées avec la syntaxe lang (readmore) ou avec l'action lang (textless)

Cliquer pour voir les explicationsc'est bon, j'ai compris

Un exemple concret

Au début des démos, j'utilise cette action pour afficher le bouton "Voir les nouveautés"

Pour simplifier et généraliser cet usage, j'ai ajouté un prefset au fichier prefs.ini du dossier custom de l'action readmode (plus d'infos)

[changelog]
class="tr"
textmore="Voir les nouveautés" 
textmore-class="bd-primary bd-arrondi ph1" 
panel-style="box bg-beige p1 m-child-raz"
  • Le contenu de la barre read-more est aligné à droite par la tr dans l'option class qui cible le conteneur. 
  • Pour éviter que le bouton utilise toute la largeur du bloc parent, le style est attribué à l'option textmore-class.
    J'utilise des classes UP, mais un style inline est accepté à condition de les séparer avec des points-virgule.
  • Panel-style définit le bloc avec le contenu caché.

Astuce

Si vous me posiez la question : "Pourquoi avoir des options style et class qui acceptent les mêmes arguments (classes et styles inline)"

Si je voulais exceptionnellement avoir un texte rouge pour le bouton textmore.
Comme  c'est la dernière définition qui l'emporte, je dois reprendre tous les arguments de textmore-class du prefset + un t-rouge.
Ou plus simplement utilisé l'option textmore-style inutilisée pour ajouter une classe t-rouge.

Pour info, cette page utilise 10 action(s) :
upactionslist (1) readmore (3) csv2def (1) lang (2) modal (1) div (1) jcontent-info (1)
Détails