Il est possible de créer des cadres dépliables (en "accordéon") dont seul les titres sont toujours visibles et qui affichent ou masquent leur contenu lorsque l'on clique dessus.

Cliquez sur les barres pour ouvrir les accordéons


Par défaut la syntaxe "panel" sans précision de type produit des encarts fermés à l'ouverture de la page.

{{accordion}}
{{panel title="indiquez ici votre titre" class="panel-success"}}
texte à escamoter
{{end elem="panel"}}
{{panel title="indiquez ici votre titre" class="panel-info"}}
texte à escamoter
{{end elem="panel"}}
{{end elem="accordion"}}
donne
texte à escamoter
texte à escamoter

Panel déclaré ouvert à l'affichage de la page


{{panel title="indiquez ici votre titre" type="collapsible" class="panel-warning"}}
texte à escamoter
{{end elem="panel"}}
donne

indiquez ici votre titre

texte à escamoter

Panel déclaré fermé à l'affichage de la page


{{panel title="indiquez ici votre titre" type="collapsed" class="panel-danger"}} 
texte à escamoter
{{end elem="panel"}}
donne
texte à escamoter

Personnaliser les barres de titre avec des icones

Il est possible d'ajouter des icones au texte dans un titre.

Par exemple pour ajouter un icone en forme d'oeil, renseigner le title suivant :
  • title="<span class='glyphicon glyphicon-eye-open'></span> Semaine du 22 au 26 Avril 2019"

Retrouvez tous les icones possibles sur cette page : https://getbootstrap.com/docs/3.3/components/#glyphicons

Il vous suffit ensuite de remplacer la partie "eye-open" (dans l'exemple ci-dessus) par le nom de l’icone qui vous intéresse.

{{accordion}}
{{panel title="<span class='glyphicon glyphicon-eye-open'></span> class success" class="panel-success"}}
info
{{end elem="panel"}}
{{end elem="accordion"}}
donne
info
texte a masquer
texte a masquer
texte a masquer
texte a masquer


Accordéons imbriqués


Losqu'un accordéon est situé lui-même dans un autre accordéon, un clic sur sa barre de titre entraine une action sur le niveau supérieur.

Niveau 1

Un autre accordéon:
blablabla


Pour utiliser juste des encarts (panels) fixes

{{panel title="indiquez ici votre titre (non clicable)"}}
texte affiché de manière permanente (non masquable)
{{end elem="panel"}}

donne

indiquez ici votre titre (non clicable)

texte affiché de manière permanente (non masquable)