<section class="demo-section">
  <h2>Accordion</h2>

  <div class="accordion">
    <details class="accordion-item">
      <summary class="accordion-summary">
        <span class="accordion-summary-content">
          <i class="ph ph-user" aria-hidden="true"></i>
          Account details
        </span>
        <i class="ph ph-caret-down accordion-icon" aria-hidden="true"></i>
      </summary>
      <div class="accordion-panel">
        <p>Manage your profile, password and notification preferences.</p>
      </div>
    </details>

    <details class="accordion-item">
      <summary class="accordion-summary">
        <span class="accordion-summary-content">
          <i class="ph ph-credit-card" aria-hidden="true"></i>
          Billing
        </span>
        <i class="ph ph-caret-down accordion-icon" aria-hidden="true"></i>
      </summary>
      <div class="accordion-panel">
        <p>View invoices, update payment methods and manage subscriptions.</p>
      </div>
    </details>

    <details class="accordion-item">
      <summary class="accordion-summary">
        <span class="accordion-summary-content">
          <i class="ph ph-bell" aria-hidden="true"></i>
          Notifications
        </span>
        <i class="ph ph-caret-down accordion-icon" aria-hidden="true"></i>
      </summary>
      <div class="accordion-panel">
        <p>Choose how and when you want to be notified.</p>
      </div>
    </details>
  </div>

  <h3>Disclosure</h3>
  <div class="disclosure">
    <details class="accordion-item">
      <summary class="accordion-summary">
        <span class="accordion-summary-content">Shipping options</span>
        <i class="ph ph-caret-down accordion-icon" aria-hidden="true"></i>
      </summary>
      <div class="accordion-panel">
        <p>Standard, express and same-day delivery are available.</p>
      </div>
    </details>
  </div>
</section>