Easy Responsive Tabs

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.