Developing Tab Templates

… maximum number of tabs you may have in a tab set. When there is more than one tab set on a page, or a nested tab set, sometimes you may want to style tabs with a global index that runs through all tab sets in a page. For global indexed styling, Magic Tabs provides the classes .jl_magic_tabs_gix_1…

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

Tabs works with the following form blocks Express - the default Form block provided with concrete5. … Formify - a marketplace forms addon Formidable, a marketplace forms addon Page List - Form to Magic Tabs can also be used to split a page list into tabs! … Forms in Forms to Magic Tabs

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

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

tab history in the advanced tab settings for the opening Magic Tabs block on the page you are linking to. For example, you can code a link using an absolute URL for the first tab on this page using reload page with another tab If you click the external link reload page with another tab, this page will be reloaded as if it were another page and the tab about Linking within a page

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…

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

Loading tab content Interaction in tabs Loading tab sets AJAX loading tab sets Magic Tabs can be used with AJAX capable loaders such as Universal Content Puller. If you have a tab set in a page area or stack and AJAX load that page area or stack, Magic Tabs will render the tab set when the AJAX…

Splitting a Page List to an Accordion

Tabs works with the core Page List block and the following form blocks Page List - Form to Magic Tabs can also be used to split a page list into tabs! … Formify - a marketplace forms addon Formidable, a marketplace forms addon While the Page List example uses an accordion setting, Forms to Magic Tabs can be used equally well with horizontal or vertical tabs.


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.