Tabs with Layouts and Containers

General Principles

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

In Concrete CMS 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 within 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 4 tabs. The first, third  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

Gotchas

The main difficulty arises from the way Concrete CMS creates and adds layouts. Layouts can be moved about an area, but it isn't easy. 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.

Containers

Introduced with Concrete CMS v9, containers are pre-defined sub templates provided by a theme. From a tabs point of view, You can treat a container in the same way as you would treat you would a layout. 

Containers are implemented as a special type of block that introduces sub-areas according to the container template. You can't spread a tab set across areas. 

  • You can have a tab set within container area.
  • You can have a complete container within a single tab. The important consideration is that the Magic Tabs blocks must be outside the container, so the container is wholly contained within a single tab.

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

Layout based tab addons

This is old news and irrelevant nowadays. Read it for some historical perspective.

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!

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…
Read more...
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…
Read more...
Tabs with Layouts and Containers
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…
Read more...
Accordions
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.
Read more...
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…
Read more...
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.
Read more...
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…
Read more...
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,…
Read more...
Form to Magic Tabs block details
Details of how the Form to Magic Tabs block is used to split a form into tabs.
Read more...
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
Read more...
Tabs and AJAX
AJAX loading sets of tabs and AJAX loading content within a tab.
Read more...
No Tabs
Magic tabs without the tabs!
Read more...
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.
Read more...
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.
Read more...
Developer Interfaces
Magic Tabs provides JavaScript events and a php interface for developers to integrate to tabs.
Read more...
Version History
Version history for Magic Tabs.
Read more...