To use Magic Tabs for a straight forward set of tabs, you only need Add and Save the block without entering anything to the edit dialog. Magic Tabs takes care of everything else.
Other tabs in the Edit Block introduce 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 exceptions are the optional Edit Block > Advanced > Nesting level which applies to how the nesting is adjusted for that specific tab and Edit Block > Icons, which again are specific to a single tab or accordion transition.
Magic Tabs Edit Block > Advanced > Nesting Level supports two levels of nesting. You can have tabs within tabs within tabs! (but no deeper than that). The available options are:
- Continue (default)
- 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 level, Nested 1 and Nested 2.
If a 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.
Magic Tabs Edit Block > Advanced > Tab continuity provides continuity when a user returns to a page. When 'continuity on' is selected for a set of tabs, the last tab opened within that set will be remembered in a browser cookie and automatically opened when a user returns to the page.
By default, Tab continuity is set to 'continuity off'.
The continuity for a set of tabs is set in the edit dialog for the first tab in a set and the setting is not prcessed for subsequent tabs in a set. You can configure different continuity settings for different sets of Magic Tabs or nested sets of Magic Tabs on the same page.
Magic Tabs Edit Block > Advanced > Tab history can be set to track the history of tabs. 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.
By default, Edit Block > Advanced > Tab history is set to 'History off'. The other alternatives are 'History on, static page title' and 'History on, dynamic page title'. Th dynamic variant will adjust the page title a browser shows to match the title of the current tab.
The history of each tab clicked is tracked by changing the URL parameters to show ?tab=tab_identity. You can also use the displayed URL to copy and paste elsewhere on your site to link to a specific tab, or paste the tab_identity into a Magic Tabs Jump block.
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.
Accordion responsive threshold
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 setting Edit Block > Advanced > Accordion 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 Accordion responsive threshold as 0, the default value.
To see this set of tabs render as an accordion, reduce your browser window to 700 pixels or less and refresh this page.
See Accordions for more details about formatting tabs as accordions and the associated block templates.
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 also render as horizontal accordions below the Accordion responsive threshold. If you develop your own tab templates you will need to code equivalent horizontal css to enable your vertical tabs to look good in a horizontal accordion. Good strating points are the templates Vertical Left Starter and Vertical Right Starter.
This tab set uses the template Vertical Left Starter.
The Edit Block > Transitions and Edit Block > Accordion Transitions sections in the Magic Tabs edit dialog can be used to set up transitions between tabs. You set transitions for the first tab in a set and then all other tabs in the set will use the same transitions. Accordion Transitions are used below the Accordion responsive threshold, so you can have, for example, left/right transitions for tabs and then switch to up/down transitions for accordions.
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.
You can also opt in Edit Block > Global > Show transitions on mobile devices to not use animated transitions on mobile devices. The default setting is 'Transitions on mobile'.
Tab and accordion icons are entirely optional. Tabs may have a heading with no icon, or an icon with no heading. Icons are set in the edit sections Edit Block > Icons > Tabs and Edit Block > Icons > Accordions.
When an icon is set, Magic tabs no longer looks for a tab heading in the content of a tab. If you want a heading with an icon, you need to enter it under Basic > Tab Heading. This is so you can choose to deliberately have an icon by itslf with no text at all.
Icons are set individually for each tab or accordion section. You can choose to place an icon to the Left or Right of the tab and for accordions to also override the default accordion +/- icon of the block template.
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 Magic Tabs Auto Play block is like a jump block that jumps at regular intervals. 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.
The Form to Magic Tabs block can be used to break the forms presented by a forms block into a series of tabs. It works with forms blocks from Express, Legacy Form, Formidable and Formify (Advanced Forms).
This example uses a set of tabs with the Vertical Left Starter template with transitions set fold left/right at a 400ms speed.
The Accordion responsive threshold is set to 700px and the associated Accordion Transition is set to slide up/down at 400ms.