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.

Magic Tabs documentation

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…
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…
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…
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.
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…
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.
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…
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,…
Details of how the Form to Magic Tabs block is used to split a form into tabs.
Details of how the Form to Magic Tabs block is used to split a a page list into an accordion or tabs
Magic tabs without the tabs!
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.
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.
Magic Tabs provides JavaScript events and a php interface for developers to integrate to tabs.