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 viewer an opportunity to view the headings before digging into expanded content.

Content is organized into folds and each fold is closed as a default. The user chooses whether or not to open a fold. An accordion can have multiple folds and can only be used in a 100% column layout. Each fold must contain content to be visible once published.

Examples:

Accordion Panel One: 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 Panel Two: 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 Panel Three: 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.

Fields for an Accordion

Label

The label is what shows before the content is expanded. Can only be text. Links and changes to the style of the text are not supported.

Content

You get a WYSIWYG editor for the content that is hidden by default. You can put in links, bullets, and multiple paragraphs if necessary. But the less ornamented, the better—this is for text and not images or other multimedia.

These two fields can repeat as many times as you'd like, creating many "folds" for the accordion.

Creating a New Accordion Chunk

Step 1: Scroll down to the Section category and click to expand it.

Step 2: Click to expand the Section >> Column category.

Step 3: Click the green [+] button to add a new chunk.

Step 4: Click to expand the new chunk category (Section >> Column >> Chunk).

Step 5: From the Type dropdown menu, select Accordion.

Step 6: Click to expand Section >> Column >> Chunk >> Fold.

Step 7: Enter the content for the first accordion fold in the Content field. *Please note: An accordian fold must contain content for the fold to be visible upon publishing.

Step 8: Enter the content for the first fold in the Content field.

Step 9: Click the green [+] button to create a second fold.

Step 10: Enter the Label and Content for the second fold.

Step 11: To add, remove, or move folds, click the [+], [-], and up/down arrows respectively.

Step 12: When you are finished, click Submit.

Step 13: Remember to publish the page for the updates to apply.