Collapsed text (Texte replié)

Le texte replié est un composant dynamique qui, comme son nom l’indique, permet d’inclure un texte dont une partie est masquée par défaut. Comme pour un accordéon, un bouton permet de déplier ce texte pour accéder à son intégralité.

Usage

• Ce composant sert à proposer du texte non essentiel (p. ex. une information qui peut être déduite par ailleurs…) mais qui, soit présente un intérêt pour les robots (SEO), soit permet d’apporter des informations supplémentaires au lecteur.
• L’utilisateur peut afficher le texte masqué suite à un tap sur celui-ci. Ce contenu s’étend en poussant le reste de la page vers le bas.
• Le texte replié est particulièrement utile pour des interfaces Mobile first où l’espace est compté.
• Il peut être utilisé juste sous un titre (h1, h2,…) pour apporter une explication au contenu à suivre si ce titre n’est pas suffisant pour une pleine compréhension.

Bonnes pratiques

• Par défaut, au chargement de la page le texte est replié.
• En version repliée, ce texte s’affichera sur 2 lignes minimum (y compris sur grand écran) et doit apporter du contenu supplémentaire suffisant lors de son déploiement pour éviter une frustration chez le lecteur. Il doit donc être suffisamment long pour afficher au minimum 3 lignes dans la configuration la plus large.
• Cacher un contenu via ce composant peut complexifier l’expérience utilisateur en ajoutant d'éventuelles interrogations et une interaction supplémentaire pour le lecteur.

Style & code

Standard

Pour passer un texte en texte replié, il suffit d’ajouter les classes su-collapsed-text et su-truncate-2 (issue des Helpers (classes d’aide)) sur le bloc de texte et un bouton pour gérer le déploiement. Ce bouton intégrant l’icône <i class="su-icon">déplier</i> et la classe su-toggle-text portera le déclencheur JS pour supprimer ou ajouter la classe su-truncate-2 : data-sutoggleclass='[{"parent":".su-collapsed-text","klass":"su-truncate-2"}]'.

<p class="su-collapsed-text su-truncate-2">
  Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale. Planvour nemet deuet kazetenn war soubañ dirak. Unnek all gomz roc’h vazh sec’h drezoc’h brumenn da, a bragoù skeud tach foenn ni kleñved skrivañ solier, dezho kemener peoc’h mall e atav bed. C’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo.
  <button class="su-toggle-text" data-sutoggleclass='[{"parent":".su-collapsed-text","klass":"su-truncate-2"}]'><i class="su-icon">déplier</i></button>
</p>
<p class="su-margin-top-l">
    Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h.
</p>

Sur fond sombre

<div class="su-negative">
    <p class="su-collapsed-text su-truncate-2">
    Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale. Planvour nemet deuet kazetenn war soubañ dirak. Unnek all gomz roc’h vazh sec’h drezoc’h brumenn da, a bragoù skeud tach foenn ni kleñved skrivañ solier, dezho kemener peoc’h mall e atav bed. C’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo.
    <button class="su-toggle-text" data-sutoggleclass='[{"parent":".su-collapsed-text","klass":"su-truncate-2"}]'><i class="su-icon">déplier</i></button>
    </p>
    <p class="su-margin-top-l">
        Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h.
    </p>
</div>

Sur mobile uniquement

Selon les bonnes pratiques, il ne faut pas que le texte inclus soit trop court pour éviter qu’il n’y ait rien ou trop peu à tronquer. Or, sur ordinateur, l’espace est plus important que sur mobile, ce qui peut poser problème : un texte de plus de 2 lignes en mobile, mais pas sur un écran large. Si c’est le cas, il est possible de remplacer la classe su-collapsed-text par su-collapsed-text-sm. Pensez dans ce cas à modifier la cible dans le déclencheur JS.

<p class="su-margin-bottom-l"><strong>Le paragraphe ci-dessous n’est tronqué que sur mobile.</strong></p>
<p class="su-collapsed-text-sm su-truncate-2">
  Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale. Planvour nemet deuet kazetenn war soubañ dirak. Unnek all gomz roc’h vazh sec’h drezoc’h brumenn da, a bragoù.
  <button class="su-toggle-text" data-sutoggleclass='[{"parent":".su-collapsed-text-sm","klass":"su-truncate-2"}]'><i class="su-icon">déplier</i></button>
</p>
<p class="su-margin-top-l">
    Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h.
</p>