What's inside
- pkg_tabsaccordion.zip — a two-in-one installer (recommended).
- plg_editors-xtd_tabsaccordion.zip — the editor button itself (required plugin).
- plg_content_tabsaccordion.zip — a companion plugin: ensures that Bootstrap JS (tab/collapse) is included on the site page where the Tabs or Accordion block is displayed, even if the active template doesn't include it (optional, but recommended).
Installation
1. Extensions → Manage → Install → "Submit file and install".
2. Upload `pkg_tabsaccordion.zip` - this will install both plugins at once.
3. Extensions → Plugins → make sure that the following are enabled:
- Editor Button - Tabs & Accordion (Editor Buttons group)
- Content - Tabs & Accordion runtime (Contents group) Usually Joomla enables plugins immediately after installation, but it's worth checking.
4. Open any article—a "Tabs / Accordion" button will appear under the editor window (where the "Image" and "Page Break" buttons are, etc.).
The plugin is designed for Joomla 5 and 6 with the TinyMCE editor (the default editor in Joomla).
How to use
Insert a new block
1. Place the cursor in the article text where the block should appear.
2. Click "Tabs / Accordion".
3. Select the type—"Tabs" or "Accordion".
4. Fill in the tab headings and contents. You can add more items using the "+ Add Tab" button, rearrange them using the ↑/↓ arrows, and remove a tab using "Delete" (minimum 2 tabs).
5. Check "Open first item by default" if desired.
6. Click "Insert."
Editing an already inserted block
- Double-click directly on the block in the editor text - the same dialog will open, but filled with the current tabs.
- Alternatively, place the cursor inside the block and click the "Tabs / Accordion" button again.
- In editing mode, the "Delete Block" button is available - removes the block from the text entirely.
All of this works through a direct call to the TinyMCE API, so "cursor inside block" recognition and block highlighting on hover only work when TinyMCE is active. For other editors (CodeMirror, "No Editor"), the button inserts the block as regular HTML, but live editing of existing blocks is unavailable.
How it looks on the site
The inserted markup is standard Bootstrap 5 components (`nav nav-tabs` / `tab-content` for tabs, `accordion` for the accordion), without any custom CSS styling classes. If your site template is already built on Bootstrap 5 (like most modern Joomla templates, including Cassiopeia), everything will work without any additional configuration—the plg_content_tabsaccordion plugin automatically includes the necessary JS (tab switching, item expansion) on pages with such blocks.
If your current template isn't built on Bootstrap 5, you'll either need to override the design with your own CSS under the .tabsaccordion-tabs / .tabsaccordion-accordion classes, or include Bootstrap on your site—let me know if you need to prepare this option.
