Expandable Wallet Payment Card

This is an Expandable Wallet Payment Card. It uses pure CSS to manage complex UI states without JavaScript. Its function is to conceal secondary actions — like selecting a payment method or adding funds — behind a compact primary view showing the balance. The interaction is self-contained, optimizing screen real estate while keeping critical functions one click away.

Specs

• Weight: ~4 KB (CSS only).
• Dependencies: None.
• Performance: GPU-accelerated transforms and opacity transitions.
• A11y: Visual only (Checkbox hack state management lacks proper ARIA bindings).

Anatomy

The architecture relies on the classic “checkbox hack” upgraded with modern CSS relational selectors.

• HTML (The Skeleton): The .card wrapper contains a header, a hidden checkbox (#card-toggle), and an expandable .content area. Labels act as interactive triggers, linked to the hidden input via the for attribute or direct wrapping.
• CSS (The Skin): Transitions on max-height create the expansion effect. Inner elements (bank cards, cash blocks) utilize staggered @keyframes (fadeSlideIn) for a cascading entrance.
• JS (The Nervous System): Completely absent. State is strictly declarative.

Logic

The core mechanism is the usage of the :has() pseudo-class to control parent geometry based on a deeply nested element’s state.

.card:has(.header .close .toggle-checkbox:checked) {
  max-height: 66px;
  padding: 0;
}

This single block replaces an entire JavaScript event listener. By checking if the nested .toggle-checkbox is checked, the parent .card instantly collapses its max-height. When unchecked, the card expands, and CSS handles the staggered animation of the child nodes. It turns a static stylesheet into a reactive state machine.

Feel

The interaction feels mechanical and precise. The expansion is fluid, and the staggered fade-in of the payment options mimics the behavior of a native mobile app. Selecting a card triggers a sharp, outlined highlight that slides into place, providing immediate tactile feedback.