Introduction
Easy Responsive Tabs is a powerful Joomla system plugin that allows you to create beautiful, responsive tabs anywhere in your content using simple shortcodes. With 20 unique tab styles and 24 color themes, you can create over 480 different design combinations to match your website's design perfectly.
Key Features:
- 20 beautiful tab styles (Classic, Pill, Underline, Box, Minimal, Vertical, Floating, Segmented, Arrow, Material, Bubble, Gradient, Sidebar, Elevated, Neon, Ribbon, Skewed, Border Bottom, Card Stack, Neumorphism)
- 24 color themes based on jQuery UI themes
- Custom hex color support for unlimited combinations
- Simple shortcode syntax: {etabs}...{/etabs}
- Load tabs from existing Joomla articles
- Full accessibility support (ARIA, keyboard navigation)
- Vanilla JavaScript - no jQuery dependency
- Live preview in backend configuration
- Responsive design for all devices
Perfect for organizing content, creating product tabs, FAQ sections, documentation, and any content that benefits from tabbed navigation.
Installation
Downloading the Plugin
After you purchase the extension from our store, you will receive an email containing a link to download the plugin file: plg_system_easytabs.zip
Alternatively, you can download the extension from the "Downloads" section in our store.
Installing the Plugin
To install the plugin, log in to the backend of your Joomla website.
- For Joomla 4, 5 & 6: Navigate to System > Install > Extensions. You can either drag and drop or browse for the file to install.
A success message will be displayed once the installation is complete.
After Installation
The plugin is automatically enabled after installation. You can start using tabs immediately:
- Go to Extensions > Plugins > System - Easy Responsive Tabs to configure default settings
- Use {etabs} shortcodes in your articles or modules
- Preview styles and themes in the plugin configuration
Basic Usage
Creating Basic Tabs
The simplest way to create tabs is using the {etabs} shortcode:
{etabs}
{tab Tab 1}Content for tab 1 goes here.{/tab}
{tab Tab 2}Content for tab 2 goes here.{/tab}
{tab Tab 3}Content for tab 3 goes here.{/tab}
{/etabs}
Shortcode Structure
- {etabs} - Opening tag for tab container
- {tab Title} - Opening tag for individual tab (title becomes tab name)
- Content - Tab content (can include HTML)
- {/tab} - Closing tag for tab
- {/etabs} - Closing tag for tab container
Where to Use
- Articles: Add shortcodes directly in article content
- Modules: Use in Custom HTML modules
- Custom HTML: Any content area that supports HTML
- Templates: Add in template overrides or custom HTML areas
HTML Content
You can include HTML content inside tabs:
{etabs}
{tab About}
<h3>Welcome</h3>
<p>This is HTML content.</p>
<ul><li>Item 1</li></ul>
{/tab}
{/etabs}
Styles and Themes
Applying Styles
Use the style attribute to apply a specific tab style:
{etabs style="pill"}
{tab Home}Content{/tab}
{tab About}Content{/tab}
{/etabs}
Available Styles
20 styles available: classic, pill, underline, box, minimal, vertical, floating, segmented, arrow, material, bubble, gradient, sidebar, elevated, neon, ribbon, skewed, border-bottom, card-stack, neumorphism
Applying Themes
Use the themecolor attribute to apply a color theme:
{etabs themecolor="dark-hive"}
{tab Home}Content{/tab}
{tab About}Content{/tab}
{/etabs}
Available Themes
24 themes: black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader
Combining Style and Theme
{etabs style="pill" themecolor="cupertino"}
{tab Home}Content{/tab}
{tab About}Content{/tab}
{/etabs}
Custom Colors
Use any hex color as a custom theme:
{etabs themecolor="#ff5733"}
{tab Home}Content{/tab}
{/etabs}
Article Integration
Loading Tabs from Articles
Create tabs directly from existing Joomla articles using the article attribute:
{etabs article="1,2,3"}
{/etabs}
How It Works
- Article IDs are comma-separated (e.g., "1,2,3")
- Article titles automatically become tab names
- Article content (introtext + fulltext) becomes tab content
- Content is processed through Joomla content plugins
- Respects Joomla ACL - only shows articles user can view
With Style and Theme
{etabs article="5,6,7" style="pill" themecolor="dark-hive"}
{/etabs}
Benefits
- Reuse existing article content
- Manage content in Joomla's article system
- Automatic content plugin processing
- Access control integration
- Easy content updates
Self-Closing Tag
When using articles, you can use a self-closing tag:
{etabs article="1,2,3" themecolor="cupertino"}
Plugin Settings
Configuring the Plugin
Navigate to Extensions > Plugins > System - Easy Responsive Tabs to configure default settings.
Default Settings
- Default Theme: Select the default color theme for all tabs (can be overridden in shortcode)
- Custom Theme Color: Set a custom hex color when "Custom" theme is selected
- Default Style: Select the default tab style (can be overridden in shortcode)
Live Preview
The plugin includes a live preview section that shows how your tabs will look with the selected style and theme. The preview updates automatically when you change settings.
Shortcode Examples
The plugin configuration includes 27+ comprehensive shortcode examples covering:
- Basic tabs
- All 20 styles
- All 24 themes
- Style and theme combinations
- Article integration
- HTML content examples
- Multiple tab sets
Settings Apply Globally
Default settings apply to all tabs unless overridden in the shortcode using style or themecolor attributes.
Accessibility
ARIA Support
All tabs include full ARIA attributes for accessibility:
- role="tablist" - Identifies tab container
- role="tab" - Identifies individual tabs
- role="tabpanel" - Identifies tab content panels
- aria-selected - Indicates selected tab
- aria-controls - Links tabs to their panels
- aria-labelledby - Links panels to their tabs
- aria-hidden - Hides inactive panels
- aria-orientation - Indicates horizontal/vertical layout
Keyboard Navigation
- Arrow Keys - Navigate between tabs (Left/Right for horizontal, Up/Down for vertical)
- Home/End - Jump to first/last tab
- Enter/Space - Activate selected tab
- Tab Key - Navigate through page content
Focus Management
Proper focus handling ensures:
- Active tab receives focus
- Focus moves correctly when switching tabs
- Screen readers announce tab changes
- Keyboard users can navigate efficiently
Screen Reader Support
Tabs are fully accessible to users with assistive technologies, providing proper announcements and navigation.
Advanced Features
URL Hash Navigation
Tabs can be linked via URL hash for bookmarking and direct linking:
- URL updates when tabs are switched
- Direct links to specific tabs work
- Browser back/forward buttons work
- Bookmarkable tab states
Multiple Instances
You can have multiple tab sets on the same page with different styles and themes:
{etabs style="pill" themecolor="cupertino"}
{tab Tab 1}Content{/tab}
{/etabs}
{etabs style="underline" themecolor="dark-hive"}
{tab Tab A}Content{/tab}
{/etabs}
Programmatic API
JavaScript API for programmatic control:
- showJXTab(container, tabId) - Show specific tab
- getActiveJXTab(container) - Get active tab ID
- nextJXTab(container) - Switch to next tab
- prevJXTab(container) - Switch to previous tab
Auto-Initialization
Tabs automatically initialize:
- On page load
- For dynamically added content (MutationObserver)
- Multiple instances handled correctly
- Proper cleanup on page unload
Content Plugin Processing
Tab content is processed through Joomla content plugins, allowing:
- Shortcodes in tab content
- Content plugin functionality
- Full Joomla content processing
