Working with Page Layouts: Accordions
The accordion pattern can display collapsible content and present much 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.
- Click into the body content area to choose a new block.
- Click on the Block Inserter icon to expand the block menu.
- Click the Pattern Library block to position it into the new paragraph.
- Select the Accordions block.
- Configure the Accordion and save your changes.
For a larger image, right-click and select Open Image in New Tab
Once the Accordion block is in place, you must configure the content. Below, you will find 1) the placed accordion block followed by the structure of each tab example in the demo. Once you have configured the number of tabs you'll require in the accordion and its contents, make sure to 2) click the blue Update button.
For a larger image, right-click and select Open Image in New Tab
HINT: If you need more than three tabs for the Accordion block,
- Click on one of the three ellipses on the right side of one of the items. (In our example, it is called Accordion Item Three.)
- Select Duplicate from the pop-out menu. This should provide you with a copy of Accordion Item Three that you can rename and edit.
For a larger image, right-click and select Open Image in New Tab
Reference