Collapse Large Pages into Reasonable Chunks
Accordions are great if you have a lot of important information for people to sift through; they shorten the length of a page that contains a lot of text.
Overview
Accordions let you split your content into digestible chunks that your users can then explore in ways that work for them:
- A user that’s new to a topic can expand everything and read it in order.
- A user that’s returning to look for one specific detail can jump directly to the section they need without a lot of scrolling.
- A user looking for the answer to a specific question in a list of FAQs can quickly find the correct one.
Each Accordion has a fully functional WYSIWYG editor so you can add text, images, tables, quotes, and more.
Accordion can be added standard or full width.
Example: “Accordion Options,” below, is an example of this type of component.
Accordion Options
Describe how the elements of the accordion fit together. For example, this accordion's section header is "Accordion Options," because the entries all describe fields and buttons available to you when adding an accordion.
The section header displays at the top of the component.
Use the Intro field to provide some context for or information about the rest of the accordion. It will display directly below the section header.
Click Add Accordion Item when you want to add additional accordion entries.
You can drag and drop the entries using the handle, which looks like a plus sign with arrows.
Enter a title for this section of the accordion. The title of the accordion item is what will be visible when its section is not expanded.
Body is a WYSIWYG editor with the same basic elements that you'll see in a WYSIWYG component.
When marking headers using the Block Styles menu, start with “Heading 3.” The section header is a heading 2.