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.
Par défaut la syntaxe "panel" sans précision de type produit des encarts fermés à l'ouverture de la page.
donne
donne
donne
Par exemple pour ajouter un icone en forme d'oeil, renseigner le title suivant :
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.
donne
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.
donne
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"}}
indiquez ici votre titre
texte à escamoter
indiquez ici votre titre
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"}}
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"}}
indiquez ici votre titre
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"}}
class success
info
class info
texte a masquer
class warning
texte a masquer
class danger
texte a masquer
class sans ?
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:
Niveau 2
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)