Due to recent framework updates, some users may experience problems opening accordions. For information on how to solve this problem, view instructions in the changelog.
Accordion
Expandable content
Use accordions to organize and minimize content that needs to be in a section, but does not need to be displayed on the page. Content is organized into folds. Each fold is closed by default, with the header visible.
For more information about the accordion chunk type, reference the Web Style Guide.
Example
Content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est. Aliquam ut sodales quam. Quisque euismod elit non lorem molestie at rutrum mi viverra. Curabitur semper vulputate viverra. Quisque nisl est, tempor quis lacinia sagittis, facilisis sed eros. Suspendisse placerat lorem vel nibh egestas a iaculis nunc suscipit. Ut nulla ante, viverra at consectetur ac, iaculis at mauris. Donec non arcu sem, vitae lacinia odio.
Content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est. Aliquam ut sodales quam. Quisque euismod elit non lorem molestie at rutrum mi viverra. Curabitur semper vulputate viverra. Quisque nisl est, tempor quis lacinia sagittis, facilisis sed eros. Suspendisse placerat lorem vel nibh egestas a iaculis nunc suscipit. Ut nulla ante, viverra at consectetur ac, iaculis at mauris. Donec non arcu sem, vitae lacinia odio.
Content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est. Aliquam ut sodales quam. Quisque euismod elit non lorem molestie at rutrum mi viverra. Curabitur semper vulputate viverra. Quisque nisl est, tempor quis lacinia sagittis, facilisis sed eros. Suspendisse placerat lorem vel nibh egestas a iaculis nunc suscipit. Ut nulla ante, viverra at consectetur ac, iaculis at mauris. Donec non arcu sem, vitae lacinia odio.
Accordion chunk fields
Header Level
Select a header level that will apply to the labels of all accordion folds. Be sure to use the header level appropriate for the structure of your page.
Label
The label is what shows before the content is expanded. It is text-only field.
Content
The content of the fold uses a WYSIWYG editor. Links, bullets, and multiple paragraphs are permitted; however, the content should be as simple as possible.
Creating a new accordion chunk
To add the Accordion chunk, follow these steps:
Step 1
Expand to Section > Chunk. From the Type drop-down menu, choose Accordion.
Step 2
Expand to Section > Chunk > Details and select a Position.
Then select the Header Level that will be used for all accordion fold labels.
When selecting a Header Level, keep in mind that all Framework pages should be structured in a hierarchical manner. Use actual Header levels for all content headings. Text should not be styled to give the appearance of a heading.
Step 3
For the first fold of the accordion, add text for the Label.
Step 4
In the Content section, add the text of the fold.
Step 5
Click the green plus [+] to add folds to the accordion.
Step 6
To save a draft, click Save & Preview. Submit the page to apply the changes to your page. Publish the page.