Getting Started

To help you get started with Magic Tabs, this Getting Started page and other Magic Tabs documentation pages are built as a series of Magic Tabs with content and other blocks between. You can see many more examples of what you can achieve with Magic Tabs throughout the Magic Tabs documentation.

Creating a Set of Tabs

In the edit dialog the only field you need to be concerned with is the Edit Block > Basic > Tab heading and since Magic Tabs v7.2 you don't even need to worry about that - Magic Tabs can automatically pull the tab heading from the body of the tab. Just leave the tab heading empty and Magic Tabs will make a heading for you on the page.

You can safely ignore the rest of the edit dialog until you need to do more advanced stuff. Place one Magic Tabs block where you want a set of tabs to start, then further Magic Tabs blocks for each tab. You can place any block or stack between Magic Tabs blocks to provide the content of each tab. A set of tabs needs at least two Magic Tabs blocks. You can even place a layout within a tab - as long as the entire layout is within the tab - you cant cross tabs over layout boundaries.

Here is a simple example sequence of blocks within an area. You can have other blocks before and after, but this sequence of wrapping what you want within each tab with Magic Tabs blocks is the essential part:

  1. Magic Tabs Block 'Tab A'
  2. One or more blocks in tab A
  3. Magic Tabs Block 'Tab B'
  4. One or more blocks in tab B
  5. Magic Tabs Block 'Tab C'
  6. One or more blocks in tab C
  7. Magic Tabs End

The above will then show as tabs Tab A, Tab B and Tab C. Clicking each will show the associated tab content.

The Magic Tabs End block is optional, if you leave it out, the tab set will run on to the end of the area.

Some important points to bear in mind:

  1. Tab sets cannot go across the boundaries to an area or layout
  2. There must be at least 2 tabs in a set.
  3. Each tab needs to contain one or more blocks.
  4. Each part of a layout is effectively a separate concrete5 area, so you cannot spread tabs across layouts. See Tabs and Layouts.

If you add a Magic Tabs block and save the page in a state that does not comply with these points, you may get unexpected results.

Tabs in 90 Seconds

Watch the 90-second video here, or click the button on the right of this page.

Ending a Set of Tabs

By default, the last tab in any area will contain any other blocks up to the end of an area.

To end a set of tabs before the end of an area, simply insert a Magic Tabs End block.

Subsequent blocks will then continue below the tabbed set of blocks. Or you can start another set of tabs simply by inserting a new Magic Tabs block where you want the next set of tabs to begin.

Magic Tabs End is entirely optional. If you don’t add it, a set of tabs will run on to the end of a page area.

While a Page Loads

Magic Tabs transforms a page as it completes loading. For a large or complex page, this means you may briefly see content without the tabs while the page loads.

If you want to hide this, use block Design and Custom Template > Advanced (cog icon) > Custom Class to add 'magic-tabs-hide' to any blocks (including Magic Tabs blocks) you want to remain hidden until everything is ready. Magic Tabs will then show the hidden blocks and tabs when everything has loaded.

  • Applied in block design, 'magic-tabs-hide' hides a block when not in edit mode and is removed when tab sets are ready.
  • 'magic-tabs-hide' can also be applied in area design, so hiding an entire area while tabs are rendered and so avoiding the need to add to block design for individual tabs and their content. This can be convenient if a tab set fills an entire area.

Alternatively, you can apply the style "display:none";

This behavior can be disabled or enabled in the block edit dialog Edit Block > Global > Show blocks hidden by block design. By default, it is enabled.

Settings in Global in the block edit dialog apply to all Magic Tabs blocks.

Reusing Tabs

If you have tab content you need to use in more than one place or common to multiple sets of tabs, you can put one or more tabs into a stack.

You can put Magic Tabs blocks in stacks and include the stack in the Main area of a page and the Magic Tabs blocks will behave as if they were part of the sequence of blocks in that page area.

You can put a complete set of tabs in a stack and include the stack in any area of the page and the tabs will behave as a complete set of tabs.

However, an incomplete set of tabs within a stack included in page areas other than the Main area will try and behave as a separate set of tabs, so will not run on from tabs outside of the stack.

Tabs in Stacks

Indeed, this tab and the preceding tab 'Reusing Tabs' are actually in a stack. The stack contains these two tabs as Magic Tabs blocks and Content blocks with no Magic Tabs End block. The entire stack is then included into the middle of a set of tabs. Because it is in the Main area of a page, Magic Tabs then renders the whole set of tabs, including those from the stack, as a single set of tabs on the page.

This is just a simple example, you can put any blocks within a partial set of tabs in a stack, just like you can put any block on a page. You can even put nested sets of tabs within a tab set in a stack by changing the tab nesting level in the advanced part of the block add/edit dialog.

The index of documentation pages on the right is also a stack. In this case, it is a complete set of tabs about a Page List block that has been split into tabs and shown as an accordion.

In the Dashboard

Magic Tabs are disabled on dashboard pages, in the same way as they are disabled in Edit mode.

Any Magic Tabs block or Magic Tabs End block will be shown as a marker in the overall page/area/block sequence.

Custom Templates

The default template for a Magic Tabs block uses the bootstrap based tabs that concrete5 uses for block edit dialogs and the dashboard. For many themes these are flexible enough to look good, even when the theme is not bootstrap based.

For more styles, Magic Tabs comes with many custom templates for horizontal and vertical tab sets.

Any set of Magic Tabs will follow the template set for the first Magic Tabs block in the set. Templates set for subsequent Magic Tabs blocks in a set of tabs will be loaded, but ignored. In general, page loading will be faster if you either leave subsequent tabs with the default template (because it is small), or assign all tabs the same template as the first.

You can also design custom templates using the examples shown in the supplied templates as a starting point. The templates Self Contained Starter and other 'Starter' templates are usually good starting points because they are completely self contained with no theme dependencies. Just copy one of these templates to /application/blocks/jl_magic_tabs/templates/, rename it, and edit the styles.

If you have Buttons Factory Pro, you can even create tab templates that use themes from Buttons Factory Pro, by copying one of the Magic Tabs block's Buttons Pro Example templates, renaming and editing it to point to your Buttons Factory Pro theme!

See Developing Tab Templates for more details.

More Details

There is much more you can do with Magic Tabs. Have a look through these pages for examples, ideas and detailed documentation. (The list below uses an Autonav block)

This Example

This example uses a set of tabs with a Bootstrap Vertical Left template to pick up tab styling from the site theme with transitions set to fade show/hide at a 400ms speed. The tabs about stacks are actually included from a stack.

The Accordion responsive threshold is set to 700px.



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 and Layouts
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.