Ajouter un montrer-cacher, un spoiler sur Bootstrap

Pour certains contenus, il peut être utile de créer des montrer/cacher aussi appelés "spoiler" en anglais. Un site de critiques cinématographiques par exemple pourrait être créé avec des montrer/cacher pour dévoiler - au clic - des contenus que tous n'aimeraient pas lire avant de regarder un film.

Cette fonctionnalité permet aussi de faire participer le lecteur qui cliquera volontairement sur un lien pour afficher le contenu qu'il souhaite voir.

Utilisation de la fonctionnalité "collapse" de Bootstrap (thèmes responsive)

Elément repliable pour créer un montrer/cacher

La première de méthode de montrer/cacher sur un thème responsive Bootstrap est d'utiliser la fonctionnalité "collapse" que l'on pourra traduire par "repliable", "dépliable", "escamotable". L'exemple suivant propose une fonctionnalité collapse pour un élément.

Ce texte n'est visible que si vous avez cliqué sur le lien permettant de déployer le contenu, via le titre de celui-ci. Sur ce titre, un lien a été placé pour que le contenu soit déplié (façon accordéon) et donc visible pour le visiteur.
Il est bien entendu possible de mettre un style différent pour le lien, comme un bouton par exemple (plus facile pour comprendre qu'il faut cliquer dessus).

Vous remarquerez l'id "collapseZero", unique sur cette page. Si vous avez plusieurs id identiques - déjà c'est pas bien, un id étant unique par page - l'effet collapse sera appliqué à tous ces id.

<div id="accordion">   
    <div id="headingZero" class="panel-heading">
    <h4 class="panel-title"><a href="#collapseZero" data-toggle="collapse" data-parent="#accordion"> Cliquez ici pour voir le texte caché </a></h4>
</div>
<div id="collapseZero" class="panel-collapse collapse">
<div class="panel-body">Ce texte n'est visible que si vous avez cliqué sur le lien permettant de déployer le contenu, via le titre de celui-ci. Sur ce titre, un lien a été placé pour que le contenu soit déplié (façon accordéon) et donc visible pour le visiteur.<br />
Il est bien entendu possible de mettre un style différent pour le lien, comme un bouton par exemple (plus facile pour comprendre qu'il faut cliquer dessus).</div>
</div>
</div>

Eléments repliables avec la class "panel-group"

Si vous souhaitez mettre plusieurs montrer/cacher en créant une liste de liens, il faut ajouter la class "panel-group".

Cet élément est affiché par défaut. Le "in" dans la fin de la class : "panel-collapse collapse in" permet de créer cet effet. En retirant ce "in" en fin de class et en conservant uniquement la class panel-collapse collapse, l'élément sera replié (caché) par défaut.
Si vous êtes sur e-monsite, vous remarquerez que les textes présents dans les éléments cachés le sont aussi sur le manager. Ils ne sont éditables qu'en HTML et cela peut être gênant. Pour voir les contenus dans le manager, vous devez vous rendre dans les paramètres du compte et dans ces paramètres, décochez la case "CSS personnalisé dans les éditeurs visuels".
Ici je ne place que trois éléments en montrer/cacher mais il est possible d'en mettre plus. Le système de spoiler étant effectué avec des ancres, assurez-vous d'avoir modifié le href dans la ligne du titre (h4) et de mettre la correspondance adéquate dans l'id de l'élément caché.

Le code HTML pour créer des éléments cachés avec "collapse" Bootstrap

<div id="accordion" class="panel-group">
    <div class="panel panel-default">
    <div id="headingOne" class="panel-heading">
    <h4 class="panel-title"><a href="#collapseOne" data-toggle="collapse" data-parent="#accordion"> Premier élément repliable </a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">Cet élément est affiché par défaut. Le "in" dans la fin de la class : "panel-collapse collapse in" permet de créer cet effet. En retirant ce "in" en fin de class et en conservant uniquement la class <strong>panel-collapse collapse</strong>, l'élément sera replié (caché) par défaut.</div>
</div>
<div class="panel panel-default">
<div id="headingTwo" class="panel-heading">
<h4 class="panel-title"><a class="collapsed" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion"> Deuxième élément repliable </a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">Si vous êtes sur e-monsite, vous remarquerez que les textes présents dans les éléments cachés le sont aussi sur le manager. Ils ne sont éditables qu'en HTML et cela peut être gênant. Pour voir les contenus dans le manager, vous devez vous rendre dans les paramètres du compte et dans les paraètres, décochez la case "CSS personnalisé dans les éditeurs visuels".</div>
</div>
</div>
<div class="panel panel-default">
<div id="headingThree" class="panel-heading">
<h4 class="panel-title"><a class="collapsed" href="#collapseThree" data-toggle="collapse" data-parent="#accordion"> Troisième élément repliable </a></h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body"> Ici je ne place que trois éléments en montrer/cacher mais il est possible d'en mettre plus. Le système de spoiler étant effectué avec des ancres, assurez-vous d'avoir modifié le href dans la ligne du titre (h4) et de mettre la correspondance adéquate dans l'id de l'élément caché.</div>
</div>
</div>
</div>

 

Commentaires (1)

J.B.C
Oua ouh !

Je vais m'en servir pour faire des petits boutons "en savoir plus". Le visiteur ne lit le contenu que s'il est intéressé et cela permet d'alléger visuellement la page.
Bien mieux que les popup et fonctionne aussi sur mobile !

Mon site va être trop beau et ce sera en partie grâce à vous : un grand MERCI.

Ajouter un commentaire