Accordéon

<div class="accordion" id="acc-base">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-base-1" aria-expanded="true" aria-controls="acc-base-1">
        Comment consulter le solde de mon compte ?
      </button>
    </h2>
    <div id="acc-base-1" class="accordion-collapse collapse show">
      <div class="accordion-body">
        Connectez-vous à votre espace client, puis ouvrez la rubrique « Comptes ». Le solde disponible s'affiche en FCFA et se met à jour après chaque opération.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-base-2" aria-expanded="false" aria-controls="acc-base-2">
        Quel est le plafond de mes virements ?
      </button>
    </h2>
    <div id="acc-base-2" class="accordion-collapse collapse">
      <div class="accordion-body">
        Le plafond dépend de votre type de compte. À titre d'exemple, un compte courant peut être limité à 2 000 000 FCFA par jour pour les virements vers un autre établissement. Votre conseiller peut le relever sur demande.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-base-3" aria-expanded="false" aria-controls="acc-base-3">
        Que faire en cas de perte de ma carte ?
      </button>
    </h2>
    <div id="acc-base-3" class="accordion-collapse collapse">
      <div class="accordion-body">
        Faites opposition immédiatement auprès de votre agence ou du service client, puis demandez le remplacement de la carte. Les opérations effectuées après l'opposition ne vous sont pas imputées.
      </div>
    </div>
  </div>
</div>

<div class="accordion" id="acc-parent">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acc-parent-1" aria-expanded="true" aria-controls="acc-parent-1">
        Épargne
      </button>
    </h2>
    <div id="acc-parent-1" class="accordion-collapse collapse show" data-bs-parent="#acc-parent">
      <div class="accordion-body">
        Un livret d'épargne vous permet de mettre de l'argent de côté dès 5 000 FCFA, avec des retraits possibles à tout moment.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-parent-2" aria-expanded="false" aria-controls="acc-parent-2">
        Prêts
      </button>
    </h2>
    <div id="acc-parent-2" class="accordion-collapse collapse" data-bs-parent="#acc-parent">
      <div class="accordion-body">
        Le prêt personnel finance un projet en mensualités fixes. Utilisez le simulateur pour estimer votre mensualité avant de déposer une demande.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-parent-3" aria-expanded="false" aria-controls="acc-parent-3">
        Cartes
      </button>
    </h2>
    <div id="acc-parent-3" class="accordion-collapse collapse" data-bs-parent="#acc-parent">
      <div class="accordion-body">
        La carte de retrait permet de retirer des espèces aux distributeurs de la banque ; la carte de paiement sert aussi chez les commerçants.
      </div>
    </div>
  </div>
</div>

<div class="accordion accordion-flush border rounded" id="acc-flush">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-flush-1" aria-expanded="false" aria-controls="acc-flush-1">
        Frais de tenue de compte
      </button>
    </h2>
    <div id="acc-flush-1" class="accordion-collapse collapse" data-bs-parent="#acc-flush">
      <div class="accordion-body">Les frais sont prélevés chaque mois et apparaissent sur votre relevé.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acc-flush-2" aria-expanded="false" aria-controls="acc-flush-2">
        Frais de virement
      </button>
    </h2>
    <div id="acc-flush-2" class="accordion-collapse collapse" data-bs-parent="#acc-flush">
      <div class="accordion-body">Les virements entre vos propres comptes sont gratuits ; les autres sont facturés selon la grille tarifaire.</div>
    </div>
  </div>
</div>

// Global : avant l'import de Cauri
$accordion-button-active-bg: #EEF3EA;
$accordion-button-active-color: #212121;
$accordion-padding-y: 1.25rem;

// Local : sur un accordéon précis
.accordion-compact {
  --bs-accordion-btn-padding-y: 0.5rem;
  --bs-accordion-body-padding-y: 0.5rem;
  --bs-accordion-active-bg: #EEF3EA;
  --bs-accordion-active-color: #212121;
}

const panneau = document.querySelector('#acc-base-2');
const repli = bootstrap.Collapse.getOrCreateInstance(panneau, { toggle: false });

panneau.addEventListener('shown.bs.collapse', () => {
  console.log('Panneau ouvert');
});

repli.show();