Accordéons

Permettent de masquer/révéler des blocs de contenu de manière progressive (ex : FAQ, pliables).

Démonstration interactive

Quelles sont les pièces à fournir pour la carte consulaire ?

Vous devez fournir une preuve de nationalité malienne (acte de naissance ou carte NINA), un justificatif d'identité, un justificatif de domicile de moins de 3 mois et deux photos d'identité récentes.

Quels sont les délais de traitement d'un passeport ?

Le délai moyen d'enrôlement et de production d'un passeport biométrique est généralement compris entre 2 et 4 semaines après le dépôt physique du dossier.

    
HTML

<!-- Accordion structure -->
<div class="ml-accordion">
  <button class="ml-accordion-title" aria-expanded="false">
    Titre de l'accordéon
  </button>
  <div class="ml-accordion-content">
    <p class="ml-body-compact">Contenu ici...</p>
  </div>
</div>

Accordéons avec barre d'actions d'édition

Permet d'ajouter une barre de boutons circulaires d'actions à droite du titre d'un accordéon ou d'une carte de liste (ex : boutons monter, descendre, éditer, supprimer).

Quelle est la base juridique de la procédure administrative ?

La procédure administrative repose sur les textes réglementaires et décrets régissant l'accueil et le traitement des requêtes des usagers du service public.

    
HTML

<!-- Accordéon avec barre d'actions -->
<div class="ml-accordion">
  <div class="ml-accordion-header">
    <button class="ml-accordion-title" aria-expanded="false">
      Titre de l'élément
    </button>
    <div class="ml-action-toolbar">
      <button type="button" class="ml-action-btn" title="Monter">
        <i class="ml-icon-arrow-up-line ml-icon--xs"></i>
      </button>
      <button type="button" class="ml-action-btn" title="Descendre">
        <i class="ml-icon-arrow-down-line ml-icon--xs"></i>
      </button>
      <button type="button" class="ml-action-btn" title="Éditer">
        <i class="ml-icon-edit-line ml-icon--xs"></i>
      </button>
      <button type="button" class="ml-action-btn ml-action-btn--danger" title="Supprimer">
        <i class="ml-icon-delete-bin-line ml-icon--xs"></i>
      </button>
    </div>
  </div>
  <div class="ml-accordion-content">
    <p class="ml-body-compact">Contenu du pli...</p>
  </div>
</div>

Script d'interaction

Ajoutez ce script simple pour animer vos accordéons :

JS

document.querySelectorAll('.ml-accordion-title').forEach(btn => {
  btn.addEventListener('click', () => {
    const isExpanded = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', !isExpanded ? 'true' : 'false');
  });
});