Accordions

<section class="row g-4">
      <div class="col-xl-8">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-primary mb-3">Disclosure</span>
          <h2 class="h4">Settings Accordion</h2>
          <p class="text-secondary">Accordions reveal supporting information while keeping the main task readable.</p>
          <div class="accordion" id="settings-accordion">
            <div class="accordion-item">
              <h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#settings-account" aria-expanded="true" aria-controls="settings-account">Account Details</button></h3>
              <div id="settings-account" class="accordion-collapse collapse show" data-bs-parent="#settings-accordion">
                <div class="accordion-body">Use this area for secondary account configuration, ownership, and contact details.</div>
              </div>
            </div>
            <div class="accordion-item">
              <h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#settings-security" aria-expanded="false" aria-controls="settings-security">Security Notes</button></h3>
              <div id="settings-security" class="accordion-collapse collapse" data-bs-parent="#settings-accordion">
                <div class="accordion-body">Keep sensitive actions explicit, explain the impact, and confirm destructive changes.</div>
              </div>
            </div>
            <div class="accordion-item">
              <h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#settings-billing" aria-expanded="false" aria-controls="settings-billing">Billing Contacts</button></h3>
              <div id="settings-billing" class="accordion-collapse collapse" data-bs-parent="#settings-accordion">
                <div class="accordion-body">Store billing contacts, invoice routing, and export preferences in a predictable order.</div>
              </div>
            </div>
          </div>
        </article>
      </div>
      <div class="col-xl-4">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-success mb-3">Best Practice</span>
          <h2 class="h5">When To Use</h2>
          <ul class="athena-check-list mb-0">
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Use accordions for optional detail, not essential instructions.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Keep headings descriptive when panels are collapsed.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Avoid nesting accordions unless the content truly requires it.</span></li>
          </ul>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-info mb-3">FAQ Pattern</span>
          <h2 class="h5">Help Centre Questions</h2>
          <div class="accordion" id="faq-accordion">
            <div class="accordion-item">
              <h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-one" aria-expanded="false" aria-controls="faq-one">How do I reset MFA?</button></h3>
              <div id="faq-one" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"><div class="accordion-body">Ask an administrator to issue a new MFA enrolment from the user profile.</div></div>
            </div>
            <div class="accordion-item">
              <h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-two" aria-expanded="false" aria-controls="faq-two">Where are exports stored?</button></h3>
              <div id="faq-two" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"><div class="accordion-body">Exports should be generated server-side and stored according to your retention policy.</div></div>
            </div>
          </div>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-warning mb-3">Guidance</span>
          <h2 class="h5">Accessibility Tips</h2>
          <p class="text-secondary">Bootstrap manages the expanded state. Authors still need meaningful headings, logical order, and visible content outside collapsed panels when users must see it.</p>
          <p class="mb-0">For long forms, prefer step-by-step pages over hiding required fields inside many collapsed panels.</p>
        </article>
      </div>
    </section>