Jump the navigation


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.


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.


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.

beaker duck hiker icon-a-to-z icon-arrow-circle-down icon-arrow-circle-up icon-arrow-down icon-arrow-left icon-arrow-right icon-arrow-up icon-calendar-no-circle icon-calendar icon-camera icon-clock icon-cv icon-dot icon-down-triangle icon-email-circle icon-email icon-external-link icon-facebook icon-flickr icon-generic-blog icon-google-plus icon-home icon-instagram icon-library icon-link-circle icon-link-inverted icon-linkedin icon-lock icon-magazine icon-map-pin icon-map2 icon-menu-hamburger icon-menu-mobile-a icon-menu-mobile-b icon-menu-x icon-mywhitman-cog icon-news icon-phone icon-pinterest icon-play icon-quote icon-search-a icon-search-b icon-search-mobile-a icon-search-mobile-b icon-share icon-snail-mail icon-tumblr icon-twitter icon-vimeo icon-youtube logo-whitman-nc-flat logo-whitman-nc-stacked logo-whitman-no-clocktower slider-category-arrow-2px slider-category-arrow-no-line slider-category-arrow-solid slider-category-arrow slider-category-line-2px slider-category-line-solid slider-category-line tc_icon-filmstrip-fl tc_icon-filmstrip-ln tc_icon-play-fl-closed tc_icon-play-fl-open tc_icon-play-ln-closed tc_icon-play-ln-open wifi