Developer Interfaces

JavaScript events

Magic Tabs will trigger the custom JavaScript event 'jl_magic_tabs_show' for a tab when it is shown and the event 'jl_magic_tabs_done' when any transitions have completed. 

The events are triggered on the tab body. This is a <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.


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:

Added in Magic Tabs  v7.1.2 (for c5.7 and c5v8), Magic Tabs also triggers the JavaScript event jl_magic_tabs_ready when tab initialisation is complete. This is triggered on the wrapper for the tab controls, typically a <ul> element identified by the tab set, such as ".jl_magic_tabs.jl_magic_tabs_main_s1".

Template code parameters

All magic tabs sets take their settings and tab styling from the first tab block in the set and its associated block template (or for the first on a page for global settings). Other tab blocks in the set are used just to set the tab name

In addition to setting parameters within the block edit dialog, some template parameters can be configured in php immediately beneath the proforma using:

$ch->set_param (‘name’,’value’);

or, for parameters marked 'g':

$ch->set_global_param (‘name’,’value’);

On concrete 5.6 and before these can also be set globally in config/site.php by defining a similarly named constant. On concrete5.7+, the equivalent values can be set in application/config/magic_tabs.php (these were in app.php for Magic Tabs before v7.1).

With Magic Tabs v7.1+, many global settings can be edited directly in the block edit dialog.

  • insert_location / JL_MAGIC_TABS_INSERT_LOCATION / app.magic_tabs.insert_location - immediate/top - defaults to immediate, where the tabs are placed within the surrounding area, immediately above the tabbed content, or at the top of the area. Be careful about using ‘top’ when there is more than one set of tabs in an area.
  • auto_show (g) / JL_MAGIC_TABS_ENABLE_AUTO_SHOW  / app.magic_tabs.enable_auto_show - true/false- defaults to true, controls how magic tabs treats elements hidden by the block design dialog.
  • tab_url (g) / JL_MAGIC_TABS_ENABLE_TAB_URL  / app.magic_tabs.enable_tab_url - true/false- defaults to true, enables linking into tabs by URL ?tab= parameter and internal linking to tabs by #id.
  • diagnostics_enabled (g) / JL_MAGIC_TABS_ENABLE_DIAGNOSTICS  / app.magic_tabs.enable_diagnostics - false/true - defaults to false, outlines all tab bodies and enables output of verbose diagnostics to the developer console that may be of help to developers of templates that diverge greatly from the div/ul/li/a standard for tabs.
  • autoplay_diagnostics_enabled (g)/ JL_MAGIC_TABS_ENABLE_AUTOPLAY_DIAGNOSTICS  / app.magic_tabs.enable_autoplay_diagnostics - false/true - defaults to false, enables output of verbose diagnostics to the developer console for the autoplay behaviours.
  • tab_continuity / JL_MAGIC_TABS_CONTINUITY  / app.magic_tabs.continuity - on/off - defaults to on, provides continuity of tab selection when a page is re-visited.
  • accordion_always_open (g) / JL_MAGIC_TABS_ACCORDION_ALWAYS_OPEN  / app.magic_tabs.accordion_always_open - false/true - defaults to false. When in accordion mode, ensure that one tab is always open, so that a tab can't close itself. If you set this true, you will need to develop appropriate custom templates with appropriate accordion css.
  • accordion_default_open (g) / JL_MAGIC_TABS_ACCORDION_DEFAULT_OPEN / app.magic_tabs.accordion_default_open - false/true - defaults to false. When in accordion mode, the default state is all tabs closed. Setting this will default to one tab open, usually the first.
  • JL_MAGIC_TABS_HEADING_LEVELS  / app.magic_tabs.heading_levels  - defaults to '3,4,5' to set the headings used transiently to mark the tabs at each nesting level. Set this only as a configuration constant to use other heading levels as tab markers. This makes no difference to how tabs are eventually displayed, but may impact searching a page.

If setting parameters in a custom tab template, the usual place to insert the settings is immediately above the lines at the bottom of the template that load the jl_magic_tabs_view_body package element:

Loader::packageElement('jl_magic_tabs_view_body', ..... )

Last updated: earlier this month