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 else, which is what v1.x of Magic Tabs has always done.

Magic Tabs v2 introduces a range of advanced settings that can optionally be used to change tab behaviour and add transitions. 

Always remember, the first tab in a set controls the template and the advanced settings and transitions applied to the entire tab set.

The exception is the Optional nesting level which applies to how the nesting is adjusted for that specific tab.

Nested Tabs

Nested tabs supports two levels of nesting. You can have tabs within tabs within tabs! (but no deeper than that). For the Optional nesting level the available options are:

  • Continue
  • Increase nesting
  • Decrease nesting
  • Outer level
  • Nested 1
  • Nested 2

By default, the nesting level continues at the current level. For the first tab on a page that is the outer level. If you don't want nested tabs, just leave this alone.

The Magic Tabs End block also has options to end the Current Level (default) or All levels. If you have not used nested tabs, you can also leave this alone.

The names of the options are self explanatory. The first three, Continue, Increase nesting and Decrease nesting all work relative to the current level. This comes in useful if you want to pull in nested sets or partial sets of tabs from stacks, so the tabs pulled in automatically adjust to where they are inserted.

The other options are absolute and set a tabs level as Outer levelNested 1 and Nested 2

If an nesting option increases nesting, a new set of tabs is started. If a nesting option decreases nesting, the nested set of tabs is ended and, except for ending All levels, the enclosing tab content is resumed.

Nested tabs are demonstrated on this site with the tab Named Tabs of the page Linking to Specific Tabs.

Continuity

When a user returns to a page and Tab continuity is 'on' for a set of tabs, the last tab they opened within that set will be automatically opened.

In Magic Tabs v1.x, continuity was attached to a user's session and was on globally unless the setting described in the Developer Interfaces was used to disable continuity. With Magic Tabs v2.x, the continuity for a set of tabs is set in the edit dialog for the first tab in a set and the data is saved in a browser cookie.

You can have different continuity settings for different sets of Magic Tabs on the same page.

History

When Tab history is set to 'on', Magic Tabs will track the history of each tab clicked by changing the URL parameters to show ?tab=tab_identity. When the browser back button is clicked, a visitor will now be taken back through the sequence of tabs they have visited within the page.

History for a set of tabs is set in the edit dialog for the first tab in a set and governs all tabs in that tab set. You can have different history settings for different sets of Magic Tabs on the same page.

History is only reliable when pretty URL's are enabled and showing. If pretty URL's are not enabled or not showing (such as after an edit is saved), it can interfere with the index.php?cID=nnn used to control which page is shown as the back button is clicked.

Responsive / Accordion

On small screens such a mobile devices, it can be a better user experience to alternatively show a set of tabs as an accordion.

The Responsive Threshold is a simple number that is checked when a page is rendered. If the screen width or browser width is below that size, the tab set will be rendered as an accordion. If the screen width is above that size, the tab set will be rendered as tabs.

If you want to show an accordion whatever the screen size, just set this to an arbitrarily big number such as 10000. If you always want to show tabs, no matter what, leave Responsive Threshold as 0, the default value.

All custom templates provided by Magic Tabs v2.x, including vertical tabs, will work with accordions, though there are some styling limitations for jQuery.ui based custom templates. To adapt your own custom templates to work with accordions, please see the comments in the css files.

To see this set of tabs render as an accordion, reduce your browser window to 700 pixels or less and refresh this page.

Vertical Tabs

Vertical tabs to the left or right are provided by custom templates. To develop your own vertical tab templates, simply begin development from one of the vertical left or right templates provided with Magic Tabs

Vertical templates will render as horizontal accordions below the Responsive Threshold. However, the css becomes more complicated because accordion css is based on horizontal tab css, so you will need to code equivalent horizontal css to enable your vertical tabs to look good in a horizontal accordion. 

This tab set uses the template 'Vertical Left Starter'.

Transitions

Transitions have a tab of their own in the edit dialog and are configured by the first tab in a tab set. The transition engine is the same as that used in Uber List.

There are too many permutations to list them all, so the best way to find out is to have a play and experiment.

Not all the settings work together, for example, Direction is not relevant to a Fade. With Easing, its usually best to keep it simple with Linear or Swing. Or maybe Bounce. Most visitors won't want to see your tabs wobbling 7 times before changing. It will just annoy them. Explode is always fun!

For accordions, a simple slide up/down transition is what visitors expect, though other transitions can still look slick.

Some blocks will not render well with some transitions. For example, a google maps block renders best if the transition does not manipulate the scale or size of the content.

Transitions are also limited by the jQuery and jQuery.UI libraries used to implement them. Sometimes a particular combination just doesn't work as you would expect.

Transition speed is in milliseconds. Good numbers are usually between 400ms and 800ms. Any faster is hardly worth bothering with. Much longer can get a bit tedious for your visitors.

Supporting Blocks

Magic Tabs is more than just the actual Magic Tabs and Magic Tabs End blocks. To facilitate adding links or buttons on the page to control which tab is shown, you can use the Magic Tabs Jump block.

The convenient 'Next Tab' button to the right is a Magic Tabs Jump block set to Next & Cycle with the default template and a float:right applied in the concrete5 block design dialog.

Also bundled with Magic Tabs is the Magic Tabs Auto Play block. This block superimposes a timed player onto a set of Magic Tabs, so you can use Magic Tabs for an automated slide show or slider.

Magic Data

If you also have Magic Data, you can use symbols provided by Magic Tabs to pull in information about a tab.

As with everything to do with Magic Data, new symbols are added regularly. Please refer to the Symbols Documentation and filter by the package Magic Tabs for the latest details.

You can also use Magic Data Tokens in tab headings to customise tab headings for your visitors.

(Be careful when using this in association with the Magic Tabs Jump block Goto or with external links to tabs because the tab headings and labels will change with the Magic Data and could cause a link to fail.)

Last updated: over a year ago