Search Query....

Search Results

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

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…

Form to Magic Tabs block details

Page List - Form to Magic Tabs can also be used to split a page list into tabs! The documentation accordion on the right uses this. Forms in Forms to Magic Tabs also work nicely with ajaxed express forms, as provided by @mnakalay's AJAX forms Xpress, Light and Pro editions…

No Tabs

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

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! The documentation accordion on the right uses this…

Tabs and Layouts

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

Jump and Linking to Specific Tabs

…tab or set can be set to any of: Left empty, if there is only one set of tabs on the page or for the tabs containing the block or the first set of tabs on a page. The #id or class of the tab set, as seen in the wrapping element for the tab controls…

Tabs and AJAX

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 load is completed. If its a straight AJAX load into a page, perhaps lazy loading on scroll or in response to a user action, then you are unlikely to have any issues…

Example - Page List

All we have is the standard contact form, used in a demonstration of splitting a form into tabs, so not actually used for contacts. We also have a spammer who has kindly left a contact post with some content that is not suitable for display…

Version History

7.2.0 - Split forms into tabs. Split Page Lists into tabs. Use themes from Buttons Factory Pro for tabs. Automated tab headings. Icons for tabs. Tabs designed with jQuery/ui deprecated. 7.1.1 - Fix issue where nested 2 tabs could break the rendering of nested 1 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.

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