Tabs and Layouts

General Principles

The important point to always bear in mind when working with tabs and layouts is that DOM elements form a tree and cannot be interlaced. 

In concrete5 layouts are implemented as a special type of block that creates and wraps a psudo-area for each column of the layout. You can't spread a block or stack across areas, so similarly you can't spread a tab across layouts. 

  • You can have a tab set within a layout column - because a layout column is an area.
  • You can have a complete layout witin a single tab - because a layout is wrapped in the special layout block type. The important consideration is that the Magic Tabs blocks must be outside the layout, so the layout is wholly contained.

What is fundamentally impossible is to start a tab in one column of a layout and end it in another. Or to start a layout in one tab and end it in another. To do so would break a fundamental rule of the DOM by interlacing elements.

Layout within a tab

The example here is a set of 3 tabs. The first and last tab each contain regular content blocks. The second tab - this tab - contains a layout of 2 columns, and each column in the layout contains a further content block.

General Principles

Content about general principles

Layout within a tab

Content is a layout of 2 columns

- Column 1 content - this column

- Column 2 content - Gotchas

Layout based tab addons

Content about layout based tab addons


The main difficulty arises from the way concrete5 creates and adds layouts. You can currently only add a new layout at the end of an area. Replicating the example here is best achieved by implementing the blocks and layouts sequentially. To do so in any other order can result in a lot of block moving because you can't move layouts or insert them later. 

Also, take care when adding Magic Tabs blocks after a layout that they are located in the parent area and not accidentally dropped into a layout cell. If you drop Magic Tabs block into a layout cell by mistake, it won't work as expected.

Layout based tab addons

Tabs and layouts both add extra structure to the DOM. That is why some less advanced tab addons dating back to concrete5.4 began with layouts and made each layout cell into a tab. Magic Tabs is more sophisticated than that and works by analyzing the DOM tree and injecting additional nodes to create the tabs.

If you are used to the complexities of layout based tabs addons, Magic Tabs is a lot easier. The most common mistake of users switching to Magic Tabs from layout based tabs addons it to assume complexity that just is not there!

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 without the 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.