Developing Tab Templates

tabs using nth child rules or odd/even rules. To facilitate styling individual tab controls, each Magic Tabs control is assigned an incrementing class .jl_magic_tabs_ix_1, .jl_magic_tabs_ix_2, .jl_magic_tabs_ix_3, etc.. The corresponding tab bodies are assigned classes .jl_magic_tabs_ix_1_body, .jl_magic_tabs_ix_2_body, .jl_magic_tabs_ix_3_body,…

Splitting a Page List to an Accordion

Tabs Add a Page List bock and surround it with Magic Tabs and Magic Tabs End blocks. … In the Magic Tabs block set the Accordion responsive threshold to a high number to force an accordion. The Page List ​block should be in a tab all of its own. At this stage, should you Publish the page you will have an accordion

Magic Tabs

tabs Vertical tabs Accordions Responsive threshold, render as an accordion Animated transitions for tabs and accordions Icons in tab headings Automated tab headings Back button history Easy links to tabs from on page or off page Contextual links to tabs, First, Last, Previous, Next Split Forms and Page Lists into tabs Automated player, create automated slide shows and sliders out of tabs No Tabs - tabs without tab

Form to Magic Tabs block details

… compatible with splitting the form into tabs. When splitting a Page List into tabs or an accordion, you probably don't want to enable pagination within the page list. If you want to split all elements of a form or all items in a page list into tabs, select the "Make all form sections into tabs"…

Splitting a Form into Tabs

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.

No Tabs

No-Tabs A snippet of CSS has been added to the page to equal the height of the tab bodies and hence prevent the page footer jagging up and down during transitions. .jl_magic_tabs_divider.jl_magic_tabs_main_s1{ min-height:400px; } .jl_magic_tabs_divider.jl_magic_tabs_main_s1{ min-height:400px; } You are watching a Magic Tabs no-tabs

Jump and Linking to Specific Tabs

You can insert a link tag with the class 'jl_magic_tabs_link_to_tab' that will simply open a Magic Tab within the current page. For example, you can code a link to open the tab about Jump to a Magic Tab within this page using: Magic Tabs Jump If you click the link Magic Tabs Jump , the tab will…

Tabs and Layouts

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 concrete5 creates…

Tabs and AJAX

Tabs will handle it nicely (but its up to you to be sure blocks inside the tab set are AJAX compatible). If the AJAX load of a set of tabs is already within a tab of an already rendered set of tabs, its important to consider that the AJAX loaded tab set does not know about the context of the tabs


For example, the core search would find "Magic Tabs", but would return no results (other than this page) for any of: ''Tab Magic" "Tabs Accordion JohntheFish" "MT" "How to split a page into tabs" Search++ handles full phrases and individual words, partial matches, stemming, synonyms, abbreviations,…


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.