accordion expand cards flex hover tabs glass showcase multiple items in limited space interactive project or feature selector accordion-style content reveal on hover need to show multiple cards without scrolling want interactive expand/collapse without JavaScript state collapsed cards need visible labels for navigation
Expand Cards
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/expand-cards.json Background
Customize
Quick Start
<div class="expand-cards"><div class="expand-card active"><div class="expand-card-tab">Label</div><div class="expand-card-content">Content</div></div></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 2458 bytes · 116 lines
- Custom Properties
-
--expand-height--expand-tab-width--card-accent - Classes
-
.expand-cards.expand-card.expand-card-tab.expand-card-content
accordion expand cards flex hover tabs glass
Container .expand-cards holds multiple .expand-card elements. Each card has two layers:
.expand-card-tab— visible when collapsed, shows vertical rotated text.expand-card-content— visible when.activeclass is set
Toggle .active via JavaScript (e.g. mouseenter):
cards.forEach(card => {
card.addEventListener('mouseenter', () => {
cards.forEach(c => c.classList.remove('active'));
card.classList.add('active');
});
});Customize via CSS custom properties:
--expand-height— container height (default:280px)--expand-tab-width— collapsed card width (default:100px)--card-accent— RGB color values for accent tinting (e.g.52, 211, 153)
On mobile (< 768px), cards stack vertically with staggered fade-in entrance and tabs are hidden.