Working with Page Layouts: Accordions
The accordion pattern can create an accordion-style display of collapsible content and present a lot of information with a small amount of screen real estate. An accordion allows users to toggle between hiding and showing content, and each section can be expanded or collapsed by clicking the accordion title.
Using patterns, you can place a ready-made accordion branded with demo content that you can replace with your own in a couple of steps. Open or create a new page to which you want to add the accordion.
NOTE: If you create a new page, be sure to follow the steps in the banners section so that all your pages have the same flow.
- Click the GenerateBlocks icon.
- From the right-hand menu, click Open Pattern Library.
- Click the Blocks section.
- Find the option "Accordion" and click the Insert button to add the pattern to your page.
Once the Accordion block is in place, you need to configure the content and adjust the block's location so it is displayed correctly.
- Click the Document Overview icon.
- From the left-hand menu, drag and drop the Accordion block inside the Body Content block.
- Note the thin arrows in the image below, when the accordion icon is indented, it is inside another block.
- Click the Publish button (if you're doing this on a pre-existing page, the button will say Save).
If you need more than three tabs for the Accordion block, follow the below steps.
- Select the Accordion option in the Document Overview.
- Select Add New (+) from the pop-out menu.
- Click the Save button after adding as many accordion options as you need.
References