Downloading the Extension

Email: After purchasing from our store, you will receive an email with the download link.

Store: You can also download it from the Downloads section. Create an account with the same email used at purchase if you are new.

Package: EasyResponsiveTabs_UNZIP.zip

Unzip the Package

• Unzip EasyResponsiveTabs_UNZIP.zip.
• Inside you will find:
  • pkg_easytabs_1.9.zip — install this (system plugin + editor button)
  • ReadMe.txt — notes for the current version

After unzipping, install pkg_easytabs_1.9.zip.

1. Go to System → Install → Extensions.
2. Upload the package and install.
3. Confirm both plugins are enabled:
   • System - Easy Responsive Tabs
   • Editor Button - Easy Responsive Tabs
4. Optional: open the system plugin to set default style, theme, and URL hash behaviour.

Requirements: Joomla 4.x, 5.x, or 6.x · PHP 8.1+ recommended.

Download ID (DLID): Use Joomla’s built-in Download ID under extension updates.

Note: The front end is vanilla JavaScript (no jQuery).

Latest syntax uses lowercase curly braces.

{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}

• {etabs} … {/etabs} — tab set container
• {tab Title} … {/tab} — one tab; the title text is the label
• Place shortcodes in articles, Custom HTML modules, or any area that runs content plugins

Editor button

In the article editor, click Easy Tabs. A modal lets you pick style, theme, and optional URL hash, then inserts the shortcode for you.

Legacy syntax

Older content still works:

• Uppercase curly tags: {ETABS} / {TAB Title}
• Square brackets from older editor inserts: [ETABS] / [TAB Title]

Prefer lowercase {etabs} / {tab} for new pages.

Attributes can appear in any order on the opening tag.

{etabs style="pill" themecolor="cupertino"}
{tab Home}Welcome.{/tab}
{tab About}About us.{/tab}
{tab Contact}Get in touch.{/tab}
{/etabs}

Styles (20)

classic, pill, underline, box, minimal, vertical, floating, segmented, arrow, material, bubble, gradient, sidebar, elevated, neon, ribbon, skewed, border-bottom, card-stack, neumorphism

Themes (24 + custom)

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

Or a hex colour: themecolor="#ff5733" (or set Default Theme to Custom in the plugin and use Custom Theme Color).

That is 480+ style and theme combinations.

Tabs from articles

Comma-separated article IDs. Titles become tab labels; intro + full text become panel content (content plugins still run). ACL is respected.

{etabs article="283,284,285"}{/etabs}

{etabs article="283,284,285" style="pill" themecolor="dark-hive"}{/etabs}

Self-closing form without a body is also supported when article is set.

URL hash deep links

Off by default (better when many tab sets share one page). Turn on globally in plugin settings, or per set:

{etabs style="pill" themecolor="cupertino" hash="true"}
{tab Home}…{/tab}
{tab About}…{/tab}
{/etabs}

When enabled, switching tabs updates the URL so visitors can bookmark or share a specific tab.

Go to System → Plugins → System - Easy Responsive Tabs.

• Default Theme (theme) — used when the shortcode omits themecolor
• Custom Theme Color (customColor) — shown when Default Theme is Custom
• Default Style (style) — used when the shortcode omits style
• URL Hash Deep Links (enable_hash, default No) — global hash behaviour; override with hash="true" or hash="false" on a shortcode
• Style & Theme Preview — live interactive preview in the admin
• Shortcode Examples — copyable examples including hash, articles, and all styles

Shortcode attributes always override these defaults for that tab set.

Accessibility

• ARIA roles for tablist, tabs, and panels
• Keyboard: arrows, Home/End, Enter/Space
• Focus management for keyboard and screen reader users

Responsive behaviour

• All styles adapt to smaller screens
• Vertical and sidebar switch to a stacked, touch-friendly layout on tablet widths
• Arrow, ribbon, and skewed keep a horizontal strip with scroll where needed so shapes stay clear

Multiple sets

You can place several {etabs} blocks on one page, each with its own style and theme. Leave hash off (or only enable it on one set) to avoid noisy URLs.

• Confirm System - Easy Responsive Tabs is enabled.
• Check shortcode spelling: opening and closing etabs / tab tags.
• View the published page (not only the editor). Clear cache and hard-refresh after changing the plugin.
• For article tabs, use published article IDs the visitor can access.
• If the editor button is missing, enable Editor Button - Easy Responsive Tabs and confirm the system plugin is installed.
• Do not put raw {etabs} or {tab inside demo description text outside the live shortcode; the parser will treat them as tags.
• URL changing on every click with many tab sets? Turn URL Hash Deep Links off, or use hash="false" on individual sets.

Support: support.joomlax.com