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 page load. This gives the user an opportunity to view the headers before digging into expanded content.

Content is organized into folds. Each fold is closed by default, with only the header visible on page load. The user chooses whether or not to open a fold after reading the header.

An accordion can have multiple folds and can only be used in a 100% column.

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.

Best Practices

Do:

Use accordions to include content that should be on a page, but does not need to be visible by default. The content inside each fold should be brief. 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.

Accordion chunk fields

Header Level for each fold label

The selected header level 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 is seen before the click to expand the content. It is a text-only field.

Content

The content is seen when then the label is clicked. The content field uses a WYSIWYG editor. Links, bullets, and multiple paragraphs can be added; however, the content should be as simple and brief 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.

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.

Step 4

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

Step 5

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

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

Step 6

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