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. Perfect for organizing content, creating product tabs, FAQ sections, documentation, and any content that benefits from tabbed navigation.
20 Beautiful Tab Styles
Choose from a wide variety of modern tab designs:
- Classic - Traditional tab style with borders
- Pill - Modern rounded pill-style tabs
- Underline - Minimal style with underline indicator
- Box - Boxed tab design
- Minimal - Clean minimal design
- Vertical - Side-by-side vertical layout
- Floating - Floating tabs with shadows
- Segmented - Segmented control style
- Arrow - Unique arrow-shaped tabs
- Material - Material Design style
- Bubble - Bubble-style tabs
- Gradient - Gradient background tabs
- Sidebar - Sidebar navigation style
- Elevated - Elevated card-style tabs
- Neon - Eye-catching neon glow effect
- Ribbon - Elegant ribbon-style tabs
- Skewed - Modern skewed/angled design
- Border Bottom - Clean border-bottom indicator
- Card Stack - Card stack design
- Neumorphism - Modern neumorphism design
24 Color Themes
Choose from 24 professionally designed color themes based on jQuery UI 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
Custom Color Support: Use any hex color as a custom theme for unlimited color combinations (e.g., themecolor="#ff5733").
480+ Combinations: Combine 20 styles with 24 themes for over 480 unique design combinations!
Simple Shortcode System
Basic Syntax:
{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}
With Style and Theme:
{etabs style="pill" themecolor="cupertino"}
{tab Home}Welcome content.{/tab}
{tab About}About content.{/tab}
{/etabs}
Works Everywhere: Insert shortcodes in articles, modules, custom HTML, or any content area that supports HTML.
Article Integration
Load tabs directly from existing Joomla articles:
{etabs article="1,2,3" style="pill" themecolor="dark-hive"}
{/etabs}
Features:
- 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
- Easy content management through Joomla's article system
Full Accessibility Support
ARIA Attributes: Full ARIA support with proper roles (tablist, tab, tabpanel), aria-selected, aria-controls, aria-labelledby, aria-hidden, and aria-orientation.
Keyboard Navigation:
- Arrow keys (Left/Right for horizontal, Up/Down for vertical)
- Home/End keys to jump to first/last tab
- Enter/Space to activate selected tab
- Tab key for normal page navigation
Focus Management: Proper focus handling for screen readers and keyboard users.
Screen Reader Support: Fully accessible for users with assistive technologies.
Advanced Features
URL Hash Navigation: Tabs can be linked via URL hash for bookmarking and direct linking. URL updates when tabs are switched, and browser back/forward buttons work correctly.
Multiple Instances: Support for multiple tab sets on the same page with different styles and themes.
Programmatic API: JavaScript API for programmatic tab 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 and for dynamically added content using MutationObserver.
Content Plugin Processing: Tab content is processed through Joomla content plugins, allowing shortcodes and other content plugin functionality within tabs.
Backend Features
Live Preview: See how your tabs will look directly in the plugin configuration page. Preview updates automatically when you change style or theme settings.
27+ Shortcode Examples: Comprehensive shortcode examples included in plugin configuration covering all styles, themes, and use cases.
Default Settings: Configure default style and theme in plugin settings. Can be overridden per shortcode.
Easy Configuration: Simple plugin interface with clear options and helpful descriptions.
Technical Features
Vanilla JavaScript: Pure vanilla JavaScript implementation - no jQuery or other dependencies required. Modern ES6+ code.
Modern WebAssetManager: Uses Joomla's modern WebAssetManager for efficient asset loading.
CSS Variables: Dynamic theme application using CSS variables for smooth color transitions.
Responsive Design: All styles are fully responsive and adapt beautifully to all screen sizes - desktop, tablet, and mobile.
Performance Optimized: Lightweight code with minimal overhead. Assets loaded only when needed. Compatible with Joomla caching systems.
Security Enhanced: Built with Joomla security best practices. Proper input sanitization and XSS prevention. Integrated with Joomla ACL.
Modern & Compatible: Full Joomla 4, 5 & 6 compatibility. Modern PHP 8.0+ code following Joomla best practices. Uses modern Joomla namespaces and APIs throughout.
Perfect For
- Product Pages - Organize product information in tabs (Description, Specifications, Reviews)
- FAQ Sections - Create organized FAQ tabs
- Documentation - Organize documentation content
- Tutorials - Step-by-step tutorial content
- Portfolio Sites - Showcase different project aspects
- Service Pages - Organize service information
- About Pages - Team, History, Mission tabs
- Blog Posts - Organize long-form content
- Any Content - Any content that benefits from tabbed organization
Quick Start
Installation:
1. Install the plugin: plg_system_easytabs.zip
2. Plugin is automatically enabled
3. Configure default style and theme in plugin settings
4. Start using {etabs} shortcodes in your content
Creating Tabs:
{etabs style="pill" themecolor="cupertino"}
{tab Overview}Overview content.{/tab}
{tab Features}Features content.{/tab}
{tab Pricing}Pricing content.{/tab}
{/etabs}
From Articles:
{etabs article="1,2,3"}
{/etabs}
Support
- Documentation: https://joomlax.com/documentation/easy-responsive-tabs
- Support: https://support.joomlax.com
- Store: https://www.joomlax.com
Why Choose Easy Responsive Tabs?
20 Styles - Choose from 20 unique tab designs
24 Themes - 24 professionally designed color themes
480+ Combinations - Over 480 style and theme combinations
Simple Syntax - Easy {etabs} shortcode system
Article Integration - Load tabs from existing articles
Full Accessibility - ARIA support and keyboard navigation
No Dependencies - Vanilla JavaScript, no jQuery
Live Preview - See styles in backend configuration
Responsive - Perfect display on all devices
Performance - Lightweight and optimized
Security - Built with Joomla best practices
Modern - Joomla 4, 5 & 6 compatible
Well Documented - Comprehensive examples and documentation
Transform your content organization with Easy Responsive Tabs. This powerful plugin provides everything you need to create beautiful, accessible tabs with minimal effort. Whether you're organizing product information, creating FAQ sections, or structuring documentation, Easy Responsive Tabs makes it easy with simple shortcodes and powerful customization options. The combination of 20 styles and 24 themes gives you endless design possibilities, while the article integration feature makes content management seamless.
Easy Responsive Tabs
- Version:
- 1.7
- Developer:
- Infyways Solutions
- Last updated:
-
Dec 10 2025
3 days ago - Date added:
- Nov 19 2014
- License:
- GPLv2 or later
- Type:
- Paid download
- Includes:
- p
- Compatibility:
- J4 J5 J6
Share