What are expanding cards?
Expanding cards (also called a horizontal accordion or image accordion) show several strong images side by side. One card is active and wide; the rest are collapsed. Moving the cursor to another card redistributes the space with a smooth transition.
The pattern is popular because it fits a lot of content in one row without hiding the images: the visitor sees every option at once and opens the one they care about.
How to create expanding cards in Elementor
- Drag the Expandable Accordion widget into your section.
- In Items, add one entry per card: an image (required) plus optional eyebrow, title, description and button with link.
- In Behavior, choose how many items are visible at once, whether cards open on hover or click, and which card starts open.
- In Layout, show or hide the eyebrow, title, description and button of the active card.
- In Navigation, add arrows (hidden, below or on the sides), dots, and vertical titles on collapsed cards if you want them.
- In the Style tab, adjust height, gap, radius, the width of the active card, the image overlay (flat, gradient or none) and typography.
- Publish and hover the cards.
Settings you can adjust
| Setting | What it does | Default |
|---|---|---|
| Items visible | How many cards are shown at once | 5 |
| Trigger | What opens a card: hover or click | Hover |
| Initial active index | Which card starts open (0 = first) | 0 |
| Arrows | Navigation arrows: hidden, below or sides | Hidden |
| Show dots | One pagination dot per card | Yes |
| Item height | Height of the row | 520 px |
| Gap between items | Space between cards | 8 px |
| Border radius | Corner radius of each card | 14 px |
Carousel mode for many cards
When you have more cards than the visible count, the accordion becomes a cascading carousel automatically: all cards stay in one row and the strip slides so the active card is always centered. A side peek setting trims the edge cards so visitors can tell there's more content to the left and right.
The text of the previous card fades out before its width finishes shrinking, so titles never overlap during the transition — the detail that usually looks broken in hand-made versions.
When to use expanding cards
- Feature or service sections where each item has a strong image and a short story.
- Editorial portfolios — one project per card.
- Product showcases in a hero, with a button per product.
It also has SEO controls: you choose the HTML tag of the title, eyebrow and paragraph so the cards fit your page's heading structure.
Related effects
- Stacked Cards — cards that pile up while you scroll.
- Horizontal Scroll — vertical scrolling that moves panels sideways.
- Sticky Scroll — a fixed image with scrolling text beside it.
