An Accordion Block allows you to add interactive content to your page as well as adding a lot of content in a smaller vertical space. The first item will of your list will display while the following items will be hidden with a "+" icon noting these items can be expanded. Upon expanding another item, the items that is open will now close so only 1 item displays at a time.
Each accordion item has these properties:
- Heading that displays when closed
- Title when item is expanded
- link can be added to title
- Image which can be set to left, right, center
- Description (WYSIWYG area)
- A "read more" link
- Drop block area for re-usable content
To create an Accordion Block, you will first need to create the area in which you add the Accordion items:
Now to create your Accordion Block:
You can now drag this block onto a page.
Examples of the Accordion Block:
when a user click to expand an item, all other items close and that particular one opens:
If adding images, be mindful of the width as this block will grow and shrink based on browser width. Please make sure to test in desktop and making your browser smaller in width to test for mobile views.