<details style="border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)">
  <summary style="cursor:pointer;font-weight:var(--weight-medium)">Regulatory standing</summary>
  <p class="muted" style="margin:var(--space-3) 0 0">BSP-registered Operator of Payment Systems and BancNet member in the Philippines.</p>
</details>

Secondary content revealed on click, not hover.

Animated collapse (JS pattern)

<div class="disclosure">
  <button class="btn btn--ghost btn--sm" aria-expanded="false"
    onclick="const x=this.closest('.disclosure');const open=x.querySelector('.collapse').classList.toggle('is-open');this.setAttribute('aria-expanded',open)">
    <span class="disclosure-ic">›</span> More detail
  </button>
  <div class="collapse"><p class="muted" style="margin:var(--space-2) 0 0">Secondary content revealed on click, not hover.</p></div>
</div>

Usage

Prefer native <details>/<summary> so the disclosure still opens with JavaScript disabled.
Disclosure is click-driven, never hover, touch and accessibility both depend on it.
Pair button[aria-expanded] with the .collapse target for the animated variant.

‹ Logo wall Timeline ›