Responsive Accordion 2.0 is a Joomla site module for FAQs, policies, surname directories, and other long pages that need clean expandable panels. Use hand-written slides or pull published Joomla articles by category. Layout Mode can be Accordion or Tabs.

What you can do

• Slides with optional nested child panels
• Joomla Articles by category, with child categories, tags, authors, and ordering
• Optional Ajax loading for large article lists (letter pills, search, Load more)
• Search, category filters, or A to Z title-letter filters
• Default filter (All or first category) and optional hide for the All pill
• URL anchors, Copy link, Expand All / Collapse All, Print
• Modern 2026 theme plus classic presets and custom colours
• Optional FAQPage JSON-LD schema

Admin tabs (2.0)

Module settings are grouped as: Layout, Content, Style, and Advanced. Each tab uses short section notes so related options stay easy to find.

Built for modern Joomla

• Joomla 4, 5, and 6
• PHP 8.1 or later recommended
• Native JavaScript (no jQuery)

Before you install

• Joomla: 4.x, 5.x, or 6.x
• PHP: 8.1 or newer recommended
• Content: standard com_content articles when using the Articles source
• Access: Super User or administrator to install modules

Not required

• jQuery
• A custom component
• UIkit or Bootstrap JavaScript for the accordion behaviour

Step 1: Download

After purchase, download ResponsiveAccordion_UNZIP.zip from your email or the Downloads section.

Step 2: Unzip on your computer

1. Extract ResponsiveAccordion_UNZIP.zip.
2. Inside you should see:
   • mod_responsive_accordion_2.0.0.zip (install this one)
   • ReadMe.txt

Step 3: Install in Joomla

1. System > Install > Extensions
2. Upload mod_responsive_accordion_2.0.0.zip (not the UNZIP file)
3. System > Maintenance > Clear Cache

Upgrading from 1.x keeps your saved module settings. Field names did not change in 2.0; only the admin tabs and descriptions were reorganised.

1. Open Content > Site Modules > New and choose Responsive Accordion.
2. On the Content tab, pick Slides or Joomla Articles.
3. For slides: click Add and enter title and content for each panel.
4. For articles: select categories, set ordering (Title ascending for A to Z lists), and choose Standard or Ajax loading.
5. On the Layout tab, choose Accordion or Tabs, and turn on search or category pills if needed.
6. On the Style tab, leave Modern 2026 unless you need a classic preset.
7. Assign a template position and menu items, publish, then clear cache and view the front end.

After install, confirm page source shows assets with ?2.0.0 (or your installed version) so you are not seeing a cached older script.

The Layout tab controls how visitors interact with the module.

Display mode

• Layout Mode: Accordion (stacked panels) or Tabs (one panel at a time)
• Allow Multiple Panels Open: accordion only; Yes keeps several panels open
• Chevron Position: left or right on the panel title
• Expand All / Collapse All: toolbar buttons (accordion mode)
• Animation Duration: open/close time in milliseconds (0 = instant)

Search and category pills

• Show Search: filters by title and body text
• Show Category Filters: pill buttons above the panels
• Default Filter: All, or First category (for example A)
• Show All Pill: hide All when visitors should start on a letter or category
• Initial Visible Items: Standard loading only; show Load more after this many matches (0 = show all)

Links and shared state

• URL Anchors: unique hash per panel for deep links
• Copy Link Button: copies the panel deep link
• Print Button: opens all panels and prints
• Remember Open Panels: Off, Session, or Persistent in the browser

The Content tab chooses what appears and how articles load.

Content source

• Slides: edit panels in the module (title, content, optional category, nested children)
• Joomla Articles: pull published articles from selected categories

Article selection

• Categories, Include Child Categories, child depth
• Optional tags, authors, featured filter
• Exclude article IDs and Exclude Current Article (when shown on an article page)
• Order Articles (Title ascending for surname directories) and Order Direction

How articles load

• Standard: matching articles are in the first page HTML; search and pills filter in the browser. Set Number of Articles high enough for every letter or category you need.
• Ajax: recommended for large lists. Loads one page at a time when visitors change letter/category, search, or click Load more. Set Ajax Page Size (typical 10 to 30).
• Category Filter Mode: Joomla category titles, or Title first letter (A to Z)

Inside each article panel

• Article Text: Intro and full text (safest), intro only, or full only
• Intro Format, Intro Character Limit, Strip Plugin Tokens
• Run Content Plugins, images, date, author, Read more

Read more uses the Joomla content language string (for example Read more…), not a raw module key.

Style tab

• Style Preset: Modern 2026 (recommended), Custom colours, or classic presets
• Theme Accent Colour: optional accent for the selected preset
• Theme CSS Override: scoped CSS after the theme (use #jx-ra-{moduleId})
• Title typography: font size, weight, transform, line height, letter spacing
• Custom colours when Style Preset is Custom (open/closed title backgrounds and text)

Advanced tab

• FAQ Schema (JSON-LD): FAQPage markup for real question and answer panels
• Module Class Suffix: extra class on the wrapper
• Additional CSS: raw CSS for this module instance

For large article directories, turn FAQ schema off or keep intros short if page weight matters. Schema is built from panels rendered on the first response.

Use this when you have many articles (for example 100+ surname stories) and letter pills.

1. Content Source: Joomla Articles
2. Content Loading: Ajax
3. Ajax Page Size: 20 (or 10 to 30)
4. Category Filter Mode: Title first letter (A to Z)
5. Order Articles: Title, Direction: Ascending
6. Layout tab: Default Filter First category, Show All Pill No if visitors should start on A

With Ajax on, the first page only loads the default letter (or All) page. Changing letter, searching, or Load more fetches the next page from the server. Number of Articles and Initial Visible Items are not used in Ajax mode.

Ajax lightens the module HTML. It does not change how long a full article page takes to open after Read more.

The live demo at demo.joomlax.com/demo/content-display/responsive-accordion includes Overview, Articles, Tabs, Nested, and Filters variants.

Open Articles for category-driven panels, Tabs for horizontal layout, Nested for child panels, and Filters for search and category pills.

• Empty article panels

  • Use Article Text: Intro and full text. Clear cache. Remove any old template override of mod_responsive_accordion that can mask updates.

• Letter filter shows No matching items with Load more

  • Update to 1.9.1 or later. In Standard mode, Load more paginates within the active filter. Prefer Ajax for very large lists.

• Some letters missing stories

  • In Standard mode, raise Number of Articles so every story is in the HTML. Or switch to Ajax loading.

• Read more shows MOD_ARTICLES_NEWS_READMORE

  • Install 1.10.1 or 2.0.0+. Clear cache and hard-refresh.

• Old behaviour after update

  • System > Clear Cache, hard-refresh, confirm assets show the new version query string. Check for template overrides under html/mod_responsive_accordion.

• Ajax returns an error

  • Confirm Content Loading is Ajax, the module is published, and com_ajax is available. Test while logged out as a guest if access levels matter.

• Which Joomla versions are supported?

  • Joomla 4, 5, and 6. PHP 8.1 or later is recommended.

• What file do I install?

  • Unzip ResponsiveAccordion_UNZIP.zip, then install mod_responsive_accordion_2.0.0.zip.

• Do my old settings survive an upgrade to 2.0?

  • Yes. Parameter names are unchanged. Only the admin tabs and help text were reorganised.

• When should I use Ajax?

  • When you have a large article directory (often 100+) and want letter pills or search without putting every panel in the first HTML response.

• Where can I get help?

  • Visit support.joomlax.com.

Documentation: joomlax.com/documentation/responsive-accordion

Demo: demo.joomlax.com/demo/content-display/responsive-accordion