Tab Expander (Collapsible Tab)

The Tab Expander feature lets you embed additional, collapsible content directly within a tab button. When a tab is active, its expander panel opens to reveal extra details or summaries; inactive tabs keep their expander hidden. This keeps your interface compact and lets readers dive deeper only when they choose.

Who Should Use This

FAQ Pages: Show brief questions and expand answers on demand
Product Teasers: Display a short title, then reveal specs or pricing
Mobile Views: Keep buttons concise, expanding content only when needed

Prerequisites

Easy Tabs Block Pro activated
A Tabs block with at least one Tab Expander added to each Tab Button

How to Add a Tab Expander

Insert or Select a Tab Button
In Gutenberg, add a Tab Button (or select an existing one).
Add the Tab Expander Block
Click the + inside the Tab Button and choose Tab Expander (Collapsible Tab).
Enter Expander Content
Inside the expander, add any Gutenberg blocks—text, images, lists, or shortcodes.
Repeat for Other Tabs
Add expanders to as many tab buttons as you need.

Placeholder Image: Tab Expander insertion inside a Tab Button

Expander Settings

Responsive Visibility
Control where the expander appears:
- Hide on Desktop
- Hide on Tablet
- Hide on Mobile

How It Works

When a Tab Button with an expander is active, its inner expander section slides open.
Only the active tab’s expander remains visible; switching tabs automatically collapses the previous expander.

Best Practices

Keep Content Snappy: Use expanders for short summaries or highlights, not lengthy paragraphs
Use Clear Labels: Label tab buttons so users know there’s more to expand
Combine with Icons: Add a “+” or arrow icon to signal expandability
Test on Mobile: Ensure expanders behave smoothly on touch devices

Example Use Cases

FAQ Section: List questions as tab buttons and expand answers beneath each
Feature Highlights: Show feature names in buttons, expanding to show screenshots or details
Step-by-Step Instructions: Keep steps concise, expanding each for full instructions

Placeholder Image: Tab Expander in action on a sample page

With the Tab Expander, you can present concise tab buttons while still offering rich, on-demand content—perfect for clean, interactive layouts.