Accordions
Usage Case
Accordions are very helpful in breaking down large chunks of content so that the user can scan a page with much greater ease when looking for content. Accordions will not impact search engine optimization due to the content is still visible to search engines during their cataloging process.
Setup
- Drag over accordion component
- Left click on the accordion and left click the wrench icon.
- In the properties, add a heading for your accordion. For each heading you add, an area will be applied below that heading to drag components to create content. It is recommended to only add one heading, and to use a new accordion component for each accordion you need on the page as this will make it easier for managing/reorganizing order of accordions if needed.
- When ready to add content, drag a text component to the accordion.
- Heading to be used in this section is Heading 4 <h4> since the accordion header is formatted as Heading 3 <h3>
- Text will be in paragraph <p> format.
Best Practices
- If there are more than three accordions needed and are followed after one another, it is recommended to do a separate accordion for each topic. This will be much easier for the editor down the road if an accordion topic needs to be deleted, or the order switched around.
- Accordions should not have other accordions nested within them. If there is a need to nest accordions, rethink how the content is laid out and how this can be broken down into more sections or new web pages.