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.

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-->
</div>

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. For the Atomik theme and most v9 themes, the selector would be '.ccm-page'.

<script>
    if(!CCM_EDIT_MODE){
        /*
         * 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
             */
            $('.jl_magic_tabs_divider.jl_magic_tabs_main_s1').
            off('jl_magic_tabs_show').
            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
             */
            $('.jl_magic_tabs.jl_magic_tabs_main_s1').
            off('jl_magic_tabs_change').
            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
         */
        $('main').
        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
         */
        $('main').
        on('jl_magic_tabs_change', '.jl_magic_tabs.jl_magic_tabs_main_s1', function(ev,info){
            console.log("2B jl_magic_tabs_change", info);
        });
    }
</script>

For the Atomik theme and most v9 themes, the outer selector changes to '.ccm-page'.

<script>
    if(!CCM_EDIT_MODE){
        // what you change from the Elemental example
        // $('main').
        // Now select on .ccm-page
        $('.ccm-page'). // etc., As for previous example
    }
</script>

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

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.