Les Dropdown Toggles permettent d'afficher ou de masquer du contenu.
Ils sont personnalisables au besoin, vous en avez plusieurs exemples ci-dessous.
Pour que les dropdowns soient ouverts au chargement il faut ajouter la class open sur l'élement c-dropdown-toggle__header ou sur l'élement js-dropdown-trigger
Pour ajouter un titre supplémentaire au dropdown, comme par exemple Présentation sur la page Aide, il faut utliser l'élément souhaité avec la class c-dropdown-title
.js requis :
<div class="o-dropdown-toggle--module">
<div class="c-dropdown-toggle__header">
<div class="u-flex"><i class="c-fonticon__icon-chevron"></i>
<div class="u-title--mini">Remblai Lorem Ipsum</div>
</div>
</div>
<div class="c-dropdown-toggle__content">
<div class="u-column u-bubble">
<div class="u-text u-fullsize">Remblai Lorem</div>
<div class="u-centerSpaceAround u-fullsize"><a class="u-flex u-text--small" href="#"><i class="c-fonticon__icon-check"></i><span>Appliquer</span></a>
<div class="o-iconlist"><i class="c-fonticon__icon-edit"></i><i class="c-fonticon__icon-trash"></i></div>
</div>
</div>
<div class="u-column u-bubble">
<div class="u-text u-fullsize">Remblai Lorem</div>
<div class="u-centerSpaceAround u-fullsize"><a class="u-flex u-text--small" href="#"><i class="c-fonticon__icon-check"></i><span>Appliquer</span></a>
<div class="o-iconlist"><i class="c-fonticon__icon-edit"></i><i class="c-fonticon__icon-trash"></i></div>
</div>
</div>
</div>
</div>