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 see many more examples on the other pages in the Magic Tabs section of this site.

Creating a Set of Tabs

In the edit dialog the only required field is the tab heading. 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.

Here is a simple example of 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 a Tabs A, B and 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. In concrete5.7 you may need to use a Magic Tabs End block a little more often than in 5.6 because of the theme grid integration.

Some important points to bear in mind:

  1. Tab sets cannot go across the boundaries to an area.
  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 Sets of Tabs

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

To end a set of Magic 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.

In concrete5.7 you may need to use a Magic Tabs End block a little more often than in 5.6 because of the theme grid integration.

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 (Set Block Styles) > CSS >Additional CSS to add “display:none;” 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.

For versions of concrete5 that do not provide adding styles directly in Block Design, from Magic Tabs v7.1.2 (for c5.7 and c5v8), Magic Tabs provides the class 'magic-tabs-hide'. You can apply 'magic-tabs-hide' in block or area design.

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

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 Magic Tabs in a stack and include the stack in any area of the page and the Magic Tabs will behave as a complete set of tabs.

However, an incomplete set of Magic 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 Magic 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.

Custom Templates

The default template for Magic Tabs 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 several 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 quickest 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.

More Detail

There is much more you can do with Magic Tabs. Have a look through these pages for examples, ideas and detailed documentation.

Last updated: 6 months ago