Magic Tabs

Requires php7.3+.  Compatible with php8+.

What could be simpler than just inserting a block where you want to start a new tab? Just insert Magic Tabs between any other blocks and your page will magically split into tabs or accordions.

Magic Tabs is so simple, yet offers so much more:

Easy Templating

  • Many different tab templates included.
  • Most tab templates inherit from and adapt to any Bootstrap based theme.
  • Modena templates integrate styles from Modena and other Vidal themes 
  • Self contained started templates work with any theme and serve as a basis to further template development.
  • Easily add your own tab templates.
  • Use themes from ButtonsFactoryPro in tab templates.

Anything in tabs

Magic Tabs are so easy to use, you can get started by simply adding Magic Tabs blocks onto a page where you want to start each tab. If you want to explore more advanced possibilities, work your way through the comprehensive documentation on these pages.

Current Version

Magic Tabs

jl_magic_tabs - v9.0.5

Organise content and any other blocks or stacks into tabs and accordions. Create transitions between tabs.

Block Types Block Type Sets
  • Magic Tabs

Documentation Pages

Additional Pages

Magic Tabs documentation

Getting Started
To help you get started with Magic Tabs, this Getting Started page is built as a series of Magic Tabs with content and other blocks between. You can…
Read more...
Advanced Settings
To use Magic Tabs for a straight forward set of tabs, you only need enter a Tab Heading and save the edit dialog. Magic Tabs takes care of everything…
Read more...
Tabs with Layouts and Containers
You can create a set of tabs wholly within a single layout cell. You can create a layout wholly within a tab. The important consideration is that the…
Read more...
Accordions
This set of Magic Tabs is configured to always show as an accordion. To read about how it is done, please click to open the first accordion tab.
Read more...
Global Settings
Global settings can be edited directly from the Magic Tabs block edit dialog. These settings are global and will affect all Magic Tabs blocks on a…
Read more...
Jump and Linking to Specific Tabs
Link within a page using the Magic Tabs Jump block or with an href. Link from other pages with a url ?tab=tab_name parameter.
Read more...
Auto Play
The Magic Tabs Auto Play block automatically cycles through a set of Magic Tabs. With transitions you can turn a set of Magic Tabs into a simple slide…
Read more...
Splitting a Form into Tabs
The Form to Magic Tabs block can be used to break a form or page list into a series of tabs. It works with forms blocks from Express, Legacy Form,…
Read more...
Form to Magic Tabs block details
Details of how the Form to Magic Tabs block is used to split a form into tabs.
Read more...
Splitting a Page List to an Accordion
Details of how the Form to Magic Tabs block is used to split a a page list into an accordion or tabs
Read more...
Tabs and AJAX
AJAX loading sets of tabs and AJAX loading content within a tab.
Read more...
No Tabs
Magic tabs without the tabs!
Read more...
Developing Tab Templates
Magic Tabs comes with many example tab templates. For many sites, one of these will fit in with the site theme with no further modification.
Read more...
Problem Solving
If you start building a page with Magic Tabs and don't see the results you expect, here are some tips to help you solve any problems.
Read more...
Developer Interfaces
Magic Tabs provides JavaScript events and a php interface for developers to integrate to tabs.
Read more...
Version History
Version history for Magic Tabs.
Read more...