Splitting a Page List to an Accordion
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
- 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.
- 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 with a complete Page List within one section.
- 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.
- In the Form to Magic Tabs block select Make all form sections into tabs.
- Save and Publish and you will now see your Page List separated into tabs.
- 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.