VP Accordion is a small, focused Joomla 5 / 6 module that turns a list of items into a clean, collapsible accordion. It is built on the native Bootstrap 5 accordion component — the same one your template most likely already loads — so the markup is standard, the behaviour is predictable, and there is no extra JavaScript layer to break on the next Joomla update.
This guide walks you through installation, every option in the module settings, common use cases, and the most frequent troubleshooting questions.
Requirements
Before you install, make sure your environment meets the following:
- Joomla 5.0 or later, or Joomla 6.0 or later
- PHP 8.1 or higher
- A site template that includes Bootstrap 5 styles. Most modern Joomla templates do — including the default Cassiopeia template. If your template does not, you can enable a built-in option in the module settings to load Bootstrap CSS for you.
- A modern browser. The module does not target Internet Explorer.
Installation
Through the Extension Manager (recommended)
- Download the latest release ZIP from the VP Accordion product page.
- In the Joomla administrator, go to System → Install → Extensions.
- Drop the ZIP onto the upload area, or use Upload Package File → choose the ZIP.
- Wait for the green "installation successful" notice.
That is it. The module is registered with Joomla; the next step is to create an instance of it.
Creating a module instance
- Go to Content → Site Modules.
- Click New in the toolbar, then choose VP Accordion from the list of module types.
- Give it a Title (visible on the site if "Show Title" is enabled in the module's standard settings).
- Choose a position in your template — this is where the accordion will appear.
- Choose a menu assignment so the module shows up where you need it.
- Move on to the configuration tabs described below.
- Save & Close.
Module Configuration
VP Accordion's settings are split across three tabs: Items, Display, and Assets.
Items tab
This is where you build the actual accordion content. Click Add new item to add a panel. Each item has three fields:
Title. Required. The visible heading shown on the accordion button. Keep it concise — 3 to 10 words usually works best.
Content. The body of the panel, edited in Joomla's standard WYSIWYG editor. You can use formatting, links, images, lists, inline HTML, and shortcodes here. Content is filtered with safehtml for security.
Open by default. When enabled, this item starts in an expanded state on page load. In single-open mode (the default), if you mark several items as "open by default", only the first one will actually be open — the others will start collapsed. In multi-open mode, all marked items will be open at once.
You can reorder items by dragging the move handle, and remove an item with the minus button.
Display tab
These options control how the accordion looks and behaves.
Style. Choose between two visual variants:
- Default — boxed, with rounded corners and a subtle border around the whole accordion. Best for stand-alone accordion blocks on a page (FAQs, content sections, sidebar widgets).
- Flush — no outer borders. Items sit edge-to-edge against the surrounding content. Best when the accordion is part of a larger card, sidebar, or article body, and you do not want a visible "container".
Allow multiple open. Off by default. When off, opening one item collapses any other open item — classic accordion behaviour. When on, items work independently — a user can have several panels open at the same time.
Heading level. Default is H2. Choose the level (H2 through H6) that fits the outline of the page where the module appears. For accessibility and SEO it matters that headings are nested correctly: do not jump from an H1 page title straight to H4 inside the accordion. Pick the level that comes naturally after the surrounding headings.
Prepare content. On by default. When on, each item's body is processed through Joomla's content plugins before rendering — so smart tags, shortcodes, and third-party content extensions work the same way they do in regular articles. Turn this off if you want raw HTML output and a small performance gain (or if a content plugin is interfering with your markup).
Assets tab
These options control how Bootstrap is loaded.
Load Bootstrap collapse script. On by default. The module loads Joomla's bundled Bootstrap collapse JavaScript through the WebAssetManager. The WebAssetManager automatically deduplicates scripts — so even if your template already loads Bootstrap, you should not see the same script twice. The option is here mainly for edge cases (custom builds that strip Bootstrap, or templates that load a non-standard Bootstrap bundle).
Load Bootstrap CSS. Off by default. Most modern Joomla templates already include Bootstrap CSS, so loading it again would mean wasted bytes and potential style conflicts. Enable this only if your site template does not include Bootstrap — for example, a fully custom design that does not use the framework. With this option on, the accordion will look correct out of the box even on non-Bootstrap templates.
Common Use Cases
FAQ block at the bottom of a landing page
Add the module to a position that appears below your main content (often called bottom-a or similar in your template). Choose the flush style so the FAQ blends with the page rather than looking like a separate widget. Use H3 as the heading level (assuming the page already has an H2 section title above the FAQ block). Keep questions short and answers focused.
Collapsible documentation snippets
Inside a documentation article, add a module instance via the {loadmoduleid} plugin or a similar shortcode. Use the default boxed style and multiple-open mode so the reader can keep several sections expanded while comparing them.
Pricing tier breakdown
Each accordion item is a tier ("Starter", "Pro", "Business"). Inside each item, list features, limitations, and a "Buy" button. Use the default style and mark the most popular tier as "open by default" to direct attention to it.
Product specifications
For complex products with many specs (dimensions, materials, certifications, warranty), put each spec category in its own accordion item. Use flush style so the specs blend into the product page, and multi-open mode so a customer can compare two categories at once.
Troubleshooting
The accordion appears, but clicking does nothing.
Bootstrap's collapse JavaScript is not loaded on your page. Open the module settings, go to the Assets tab, and enable Load Bootstrap collapse script.
The accordion looks unstyled (no rounded corners, no spacing, plain text buttons).
Bootstrap CSS is not loaded on your page. Open the module settings, go to the Assets tab, and enable Load Bootstrap CSS.
Two items are marked "Open by default" but only the first one opens.
Expected behaviour in single-open mode. In a single-open accordion, only one panel can be open at a time. Either accept this (which is the conventional accordion pattern), or enable Allow multiple open in the Display tab.
Content plugins (smart tags, shortcodes) are not running inside the accordion items.
Open the module settings, go to the Display tab, and make sure Prepare content is on. It is on by default, but it can be disabled per-instance.
Links / images / styling inside an item are stripped.
The content field is filtered with safehtml, which preserves common tags and inline styles but removes anything that looks unsafe (script tags, suspicious iframes). Double-check your HTML in the editor's source view.
Two accordions on the same page interfere with each other.
This should not happen — every module instance generates unique IDs based on its module ID. If it does, please report it via support.
Updates
After installation, Joomla's built-in Update Manager monitors VP Accordion automatically. Updates appear in System → Update → Extensions. Just check the box and click Update — that is the entire flow.
Every release is signed with a SHA-256 checksum, which Joomla verifies after download. If the checksum does not match (a sign of a corrupted or tampered file), the update will not be installed.
The full version history is available on the VP Accordion product page.
Support
VP Accordion is a free extension distributed under the GNU GPL v2 or later. Community support is available through:
- The product page on vpjoomla.com
- The public issue tracker on GitHub
For paid extensions in the VPJoomla catalog, priority support is included with the license.
License
VP Accordion is released under the GNU General Public License v2.0 or later. You are free to use, modify, and redistribute the module under the terms of that license. Portions of the module's structure are derived from Joomla! CMS core code (mod_custom), Copyright (C) Open Source Matters, Inc., licensed under the same GPL v2 or later.