Developing Tab Templates

Custom Templates Magic Tabs comes with many example tab templates for traditional horizontal tab bars and for left and right vertical tabs. All of these also adapt for accordions. For many sites, one of these will fit in with the site theme with no further modification. Some of these templates…

Splitting a Form into Tabs

Break a form into tabs If all you want to do is break a form into tabs, the simplest structure of blocks on the page is: Magic Tabs block Form to Magic Tabs block The actual Form block, such as an Express Form block or Legacy Form block Magic Tabs End Nested form tabs within other tabs You could modify the previous structure to nest a tabbed form within another set of tabs.

Form to Magic Tabs block details

page After sucessfully submitting the Example - Contact Form on Splitting a Form Into Tabs. This page is set as the form response page. By navigating to this page through the usual page navigation. If you got here through page navigation and have not previously read Splitting a Form into Tabs, it is recommended you read that page

Magic Tabs

Pages What could be simpler than just inserting a block where you want to start a new tab? Just insert Magic Tabs between any other blocks and your page will magically split into tabs or accordions. Magic Tabs is so simple, yet offers so much more: Any block or combination of blocks within a tab.

No Tabs

no-tabs template is intended for use with the Magic Tabs Jump block to add buttons to navigate between tabs or with the Magic Tabs Autoplay block to automatically play through a set of tabs. With this template, you can set up 'tab sets' with transitions to play a slide show and not actually have any tab


With anything except an exact match the core search block will fail to return any results. Unlike the core search block, Search++ can handle searching for all sorts of mixed up and partially matching queries to return a list of pages ranked by relevance. The navbar search input and all searches…

Tabs and Layouts

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.

Jump and Linking to Specific Tabs

Tabs Edit Block > Action for the button = GoTo Edit Block > Label for the button, A text field where you can enter any label. Edit Block > Action for the button > Target tab or set can be set to any of: The #href in the tab control The text/label in the tab control Jumping to the First or Last tab

Page and Page List image selectors

Page List Dynamic A page list image selector lists pages just like you would for any other page list, but rather than returning a list of pages the selector returns a list of images identified by attributes on those pages. Hence a page list image selector can list one image per page, a limited number of images per page or any number of images per page.

Tabs and AJAX

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


Searching on this site uses Search++, a highly enhanced search system for concrete5.

Have a play, enter some multi-word searches that you know would be defeated by the core page search and see how they are handled by Search++.

For example, the core search would find "Magic Tabs", but would return no results for any of:

Search++ handles full phrases and individual words, stemming, synonyms, abbreviations and acronyms, building a ranked search to list the best matches.

We also have  a page showing a more direct comparison at Search Comparison.

If you would like to add similar enhanced searching to your concrete5 site, please contact me and we can discuss your search requirements.