The creation of an expandable content section, or accordion, requires two components: the Accordion Component and the Accordion Section Component.


Accordion Component

The accordion component displays categorized content under a set of button-like headings. Clicking on one of these buttons will expand that section and reveal all content within. An accordion component is simply a container for accordion section components and the content within.

Ideal usage: Good for single pages with a large amount of content that would otherwise require a lot of scrolling to view. Examples include FAQs or large event schedules organized by date. It is best if content can be logically categorized and broken up into sections. Each individual section is contained within an accordion section component.

Fields

Accordion Sections: This lists the accordion section components that will appear on the page.


Accordion Section Component

Displays categorized content under a set of button-like headings. Clicking on one of these buttons will expand that section and reveal all content within.

Ideal usage: (See Accordion Component, above) Accordion section components cannot function without being referred to by an accordion component.

Fields

Title: The title of the accordion button/link

Copy: The content of the accordion section

Auto Hide Section: By default, all accordion sections only appear as buttons, and expand when clicked. Unchecking this makes this section appear already expanded when a user first visits the page.

Show Section: By default, a section can be seen when visiting a page. Uncheck this to hide it from the list of accordion sections.