"Show more" button (Bouton « Voir plus »)

Le bouton Voir + est un composant dynamique permettant d'afficher la suite d'un contenu dans un espace réduit grâce à un système de « Voir + / Voir - ».

Usage

  • Le bouton Voir + permet aux utilisateurs de lire l’intégralité d’un contenu en appuyant sur le bouton « Voir + » et de le masquer en appuyant sur le bouton « Voir - ».
  • Il est souvent utilisé sur mobile pour optimiser l’espace d’affichage.
  • Il est important de tenir compte du fait qu’un utilisateur peut ne pas lire le contenu caché.

Style & code

Dépendances :

Standard

Pour designer ce composant comme attendu il faut une suite de classes issues du composant bouton : su-button, su-secondary, su-small, su-action-icon auxquelles il faut rajouter la classe su-show-more.

Pour activer son changement en « Voir - » au clic, il faut utiliser le JS data-sutoggleclass de façon à ajouter la classe su-activeau bouton. 

    <button class="su-button su-secondary su-small su-action-icon su-show-more" data-sutoggleclass='{"klass":"su-active"}'>
        <span>
            Voir <i class="su-icon">plus</i>
        </span>
        <span>
            Voir <i class="su-icon">moins</i>
        </span>
    </button>

Exemple de mise en situation

Dans cet exemple, le bouton sert à déployer un paragraphe au-dessus. Il faut donc ajouter {"sel":"#exemple","klass":"ouvert"} au su-toggleclass pour ajouter la classe ouvert au paragraphe portant l’ID exemple (les CSS gérant ce déploiement seront à faire de votre côté).

Attention, comme il y a plusieurs « toggles » à gérer, ne pas oublier les [] encadrant ceux-ci… (cf. toggleclass pour en savoir plus.)

N. B. – La classe su-block-center a été ajoutée au bouton pour le centrer.

<style>
    #exemple {
        height: 40px;
        overflow: hidden;
    }
    #exemple.ouvert {
        height: auto;
    }
</style>
<p id="exemple">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="su-button su-secondary su-small su-action-icon su-show-more su-block-center" data-sutoggleclass='[{"klass":"su-active"}, {"sel":"#exemple","klass":"ouvert"}]'>
    <span>
        Voir <i class="su-icon">plus</i>
    </span>
    <span>
        Voir <i class="su-icon">moins</i>
    </span>
</button>

Version sur fond sombre

Pour gérer le cas sur fond foncé, il faut ajouter à côté, ou au-dessus de la classe su-show-more la classe su-negative.

<div style="background: DimGray; padding: 10px">
    <button class="su-button su-secondary su-small su-action-icon su-show-more su-negative" data-sutoggleclass='{"klass":"su-active"}'>
        <span>
            Voir <i class="su-icon">plus</i>
        </span>
        <span>
            Voir <i class="su-icon">moins</i>
        </span>
    </button>
</div>

Liste des classes disponibles

  • su-show-more

Classes annexes

Le code a bien été copié !