Splitting a Page List to an Accordion

Accordion Sidebar

The Magic Tabs documentation sidebar on the right was built using a regular Page List and the Form to Magic Tabs block. (Its a versatile block and has the potential to be further developer to tab-ify any regular structure).

This is set up in a stack and then pulled into every Magic Tabs documentation page. A few changes to css were made using block design to remove the excessive margins that Elemental adds to lists in the sidebar.

Setup using Forms to Magic Tabs

  1. Add a Page List bock and surround it with Magic Tabs and Magic Tabs End blocks. It doesn't matter what order you do this in.
  2. In the Magic Tabs block set the Accordion responsive threshold to a high number to force an accordion. 
  3. 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 with a complete Page List within one section.
  4. Edit the page and Add a Form to Magic Tabs block immediately before the Page List block, so the accordion now contains a  Form to Magic Tabs block block and the Page List block.
  5. In the Form to Magic Tabs block select Make all form sections into tabs.
  6. Save and Publish and you will now see your Page List separated into tabs.
  7. If the tabs are in the wrong place, you can use Developer Mode as you would for forms to work out what you need to change.

Form block compatibility

Forms to Magic 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.
  • Express - the default Form block provided with concrete5.
  • The Legacy Form block provided with concrete5.
  • 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.

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 and Layouts
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...