Developer Interfaces

JavaScript Events

Magic Tabs will trigger the custom JavaScript events:

  • 'jl_magic_tabs_ready' when tab initialisation is complete, triggered on the tab controls.
  • 'jl_magic_tabs_change' when a tab or accordion control is clicked or changed (such as following Magic Tabs Jump), triggered on the tab controls.
  • 'jl_magic_tabs_show' for a tab when it is shown, triggered on the tab body.
  • 'jl_magic_tabs_done' when any transitions have completed, triggered on the tab body.

For events triggered on the tab controls, this is typically a <ul> element identified by the tab set, such as ".jl_magic_tabs.jl_magic_tabs_main_s1".

For events triggered on the tab body, this is the <div> element with an #id attribute matching the link in the tab control header and with the class jl_magic_tabs_divider.

These elements and classes will not exist until after Magic Tabs has initialised (jl_magic_tabs_ready), so any code to attach event handlers to change/show/done needs to take that into account.

Script developers can use these events to add custom behaviours when a Magic Tab is shown. 

As an example, here is the <div> element with #id for this tab's body.

<div id="jl_magic_tabs__gix1" class="jl_magic_tabs_divider jl_magic_tabs_main_s1 jl_magic_tabs_level_0">
<!-- More elements for the body of the tab-->

To show a tab using JavaScript, all you need to do is to trigger a click event on the <a> link element in the associated tab heading.

For example, the heading for this tab is:

<a href="#jl_magic_tabs__gix1">JavaScript events</a>

If all you want to do is link to a tab, you don't need to use JavaScript, see Jumping and Linking to Specific Tabs.

Here is a more complete example of attaching event handlers, assuming the Elemental theme.

         * Example uses Elemental theme
         * Method 1. Wait for jl_magic_tabs_ready before setting the handlers
        $('main').one('jl_magic_tabs_ready', function(){
             * Method 1A. When a tab body in the first tab set is shown
            on('jl_magic_tabs_show', function(ev, info) {
                 console.log("1A jl_magic_tabs_show", info);
             * Method 1B. When a tab control changes in the first tab set
            on('jl_magic_tabs_change', function(ev, info) {
                 console.log("1B jl_magic_tabs_change", info);
         * Method 2A. Catch any jl_magic_tabs_show and filter it to the first tab set
        on('jl_magic_tabs_show', '.jl_magic_tabs_divider.jl_magic_tabs_main_s1', function(ev,info){
            console.log("2A jl_magic_tabs_show", info);
         * Method 2B. Catch any jl_magic_tabs_change and filter it to the first tab set
        on('jl_magic_tabs_change', '.jl_magic_tabs.jl_magic_tabs_main_s1', function(ev,info){
            console.log("2B jl_magic_tabs_change", info);

Overriding Global Settings

The global settings made in Edit Block > Global Settings can be overriden for a tab set by coding new values into a custom template.

Within the template, global settings can be overriden by 

$ch->set_global_param('parameter_key', 'new value');

The available keys are:

  • tab_url : 'off'/'on' (string)
  • auto_show : 0/1 (number)
  • accordion_default_open : 0/1 (number)
  • accordion_always_open : 0/1 (number)
  • mobile_no_transitions : 0/1 (number)
  • preserve_grid_box : 0/1 (number)
  • wrap_with_grid_box : 0/1 (number)
  • grid_classes_to_remove : 'list of class names' (string)
  • exclusive_handlers : 0/1 (number)


Config File


Magic tabs uses a config file at application/config/generated_overrides/magic_tabs.php.

Further global parameters that can be set in the config file are:

  • heading_levels : the headings used for each level of tabs before the tabs are rendered, defaults to '3,4,5'.
  • debug : output diagnostic information about tab rendering to the page and developer console. Can be set to 1 for all, or a string containing any or all of 'page,tab,split,jquery,jump,play,form' to focus on specific areas of the code.

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…
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…
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…
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.
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…
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.
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…
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,…
Form to Magic Tabs block details
Details of how the Form to Magic Tabs block is used to split a form into tabs.
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
Tabs and AJAX
AJAX loading sets of tabs and AJAX loading content within a tab.
No Tabs
Magic tabs without the tabs!
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.
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.
Developer Interfaces
Magic Tabs provides JavaScript events and a php interface for developers to integrate to tabs.
Version History
Version history for Magic Tabs.