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.

Crating 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.

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 behaviour 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.

Tabs in Stacks

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.

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 containedwith no theme dependancies. Just copy one of these templates to your /application/ area, 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 3 Themes Only template to pick up tab styling from the site theme with transitions set to fade in/out at a 400ms speed.

The Accordion responsive threshold is set to 700px.

 

Magic Tabs documentation

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…
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…
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 can be edited directly from the Magic Tabs block edit dialog. These settings are global and will affect all Magic Tabs blocks on a…
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.
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…
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,…
Details of how the Form to Magic Tabs block is used to split a form into tabs.
Details of how the Form to Magic Tabs block is used to split a a page list into an accordion or tabs
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.
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.
Magic Tabs provides JavaScript events and a php interface for developers to integrate to tabs. If you have the Buttons Factory Pro addon, you can use…