Get Started

Downloading the Extension

Email: After purchasing the extension 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: ResponsiveAccordion_UNZIP.zip

Unzip the Package

• Unzip ResponsiveAccordion_UNZIP.zip.
• Inside you will find:
  • mod_responsive_accordion_1.8.zip — install this for Joomla 4, 5 & 6
  • ReadMe.txt — notes for the current version

After unzipping, install mod_responsive_accordion_1.8.zip.

1. Go to System → Install → Extensions.
2. Upload the package and install.
3. Open Content → Site Modules, find Responsive Accordion, publish it, assign a template position, and set menu assignment.

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

Note: Joomla 3 is not supported. The front-end script is vanilla JavaScript (no jQuery required).

• Layout Mode: Accordion panels or horizontal Tabs.
• Multiple Accordion Open: Allow several panels open at once, or classic single-open behaviour (accordion mode).
• Collapse Icon Align: Place the chevron on the left or right.
• Accordion Arrow: Optional pointer under the active title (hidden on Modern 2026).
• Expand / Collapse Controls: Show Expand All and Collapse All buttons.
• Search Box: Live filter with highlighted matches and a clear button.
• Category Filters: Pill filters from slide categories or article categories.
• URL Anchors: Deep links such as #jx-accordion-{moduleId}-{n} that open the matching panel.
• Copy Link: Copies the panel deep-link and briefly shows “Copied!”.
• Print Button: Optional — expands panels and opens the browser print dialog.
• Remember Open State: Off, Session, or Local storage.
• Animation Duration: Open/close timing in milliseconds (respects reduced motion).
• Initial Visible Items: Optional Load More threshold (0 = show all).

Style Preset

Default is Modern 2026 (soft cards, chevron icons, brand accent). Also included: Custom, Default, Modern, Minimal, Dark, Colorful, Gradient, Rounded, Flat, Outline, Elegant.

Theme Color

Override the accent on presets, including Modern 2026. Applied to active states and the underline accent in Tabs mode.

Theme CSS Override

Optional CSS appended after the selected theme. Scope with #jx-ra-{moduleId} or .jx-responsive-accordion.

Typography

Tab font size, weight, text transform, line height, and letter spacing.

Custom Style Colors

When Custom is selected: closed/open tab colours and text colours.

Content Source

• Slides: Custom panels managed in the module.
• Joomla Articles: Pull articles into accordion/tabs format.

Custom Slides

• Title / State / Content: Panel heading, open/closed on load, HTML body.
• Category: Used by category filter pills.
• Badge: Short label such as New or Pro.
• Font Awesome icon: Class like fa fa-star or fas fa-check.
• Nested panels: Optional child accordion items inside the panel.

Add, reorder, or remove slides with the subform controls.

Joomla Articles

• Categories, tags, authors, and exclude IDs
• Ordering, featured filter, article limit
• Images (intro/full), date, author, read more, intro character limit
• Optional content plugin events

• Module Class Suffix: Extra CSS classes on the module wrapper.
• Additional CSS: Inline CSS injected with the module.
• Enable FAQ Schema: Outputs FAQPage JSON-LD for eligible rich results.

Assets load through Joomla WebAssetManager. Useful classes: .jx-rquestion, .jx-rtitle, .jx-ranswer, .jx-racc-tab.

• Confirm the module is published, in a real template position, and assigned to the menu item.
• After changing parameters, clear Joomla cache if enabled, then hard-refresh (Ctrl+F5).
• Category filters need a category on each slide (or article categories).
• Deep links and Copy Link require URL Anchors ON.
• Icons need Font Awesome on the site (most Helix/JoomlaX templates already load it). Use classes such as fa fa-info-circle.
• Nested panels only open/close when their parent panel is open.
• Tabs mode uses an underline tab bar; long titles scroll horizontally.
• No jQuery is required. If you see older docs mentioning jQuery, ignore them for version 1.8+.
• To embed in an article, see: Joomla docs — module inside an article.

Support: support.joomlax.com