Accordion

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.

accordion chunk type field

Step 2

Expand to Section > Chunk > Details and select a Position.

Accordions can only be used in two-thirds, full, or breakout positions.

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.

header level selection for all accordion folds

Step 3

For the first fold of the accordion, add text for the Label.

accordion fold label field

Step 4

In the Content section, add the text of the fold.

accordion fold content field

Step 5

Click the green plus [+] to add folds to the accordion.

At least two folds are recommended for the accordion chunk type.
plus sign for adding accordion folds

Step 6

To save a draft, click Save & Preview. Submit the page to apply the changes to your page. Publish the page.

Best Practices

Do:

  • Use accordions to include content that should be on a page, but does not need to be visible by default. Some examples include:
    • Steps in a process
    • Options for completing a task
    • Similar information that requires different details for different audiences
  • Use only full-width accordions.

Don't:

  • Use accordions to avoid editing or streamlining your content. Well-written, concise content is much more user friendly.
  • Use single-fold accordions. Accordions with two to ten folds are best.
  • Use too many accordions on a single page. If you find you’re adding multiple accordions, it may be a sign that you need another page in your website.