site web plier code example

Example: site web plier

<!-- Collapse simple -->
<div class="js-expandmore">
  <p class="js-expandmore-title">Un élément à déplier non compris dans le "tout déplier".</p>
  <p class="js-expandmore-panel">Montre également qu'on peut placer le futur bouton dans un autre élément qu'un niveau de titre (ici p, mais div fonctionne aussi).
</div>

<!-- Regroupement de blocs à déplier -->
<button class="js-expandmore-all btn" data-expand="true" data-expandtext="Tout déplier" data-collapsetext="Tout replier" data-controls="questions">Tout déplier</button>

<div id="questions" class="js-expandmore" data-multiselectable="true">
  <h3 class="js-expandmore-title">Question 1</h3>
  <div class="js-expandmore-panel">
    <p>Le contenu caché peut être constitué de tout élément html : paragraphes, titres, tableaux, images…</p>
  </div>

  <h3 class="js-expandmore-title">Question 2</h3>
  <div class="js-expandmore-panel">
    <p>Le contenu caché peut être constitué de tout élément html : paragraphes, titres, tableaux, images…</p>
  </div>

  <h3 class="js-expandmore-title" data-expand>Faut-il une autre question sur plusieurs lignes pour vérifier le comportement du symbole d'ouverture et de fermeture ?</h3>
  <div class="js-expandmore-panel is-opened">
    <p>Oui, il le faut</p>
    <p>Ce collapse est ouvert par défaut et peut être replié.</p>
  </div>

</div>

<br>

<div class="js-expandmore">
  <p class="js-expandmore-title">Un élément à déplier non compris dans le "tout déplier".</p>
  <p class="js-expandmore-panel">Montre également qu'on peut placer le futur bouton dans un autre élément qu'un niveau de titre (ici p, mais div fonctionne aussi).
</div>