Accordion

Accordions are a great way to display large sets of information without taking up a lot of space on the page. This is great for things like Frequently Asked Questions (FAQ) or policies.
  • Published - Select or unselect to make component visible or not to site visitors. Defaults to published
  • Background Color (required) - Choose the colors which to use when displaying the component
    • White, Black, Gray
  • Display Format (required)
    • Header on Top - Accordion Below
    • Header on Left - Accordion on Right
  • Section Header (optional)
    • Include in Jump Links Menu - Select or unselect to make section title an anchor link
    • Section Title - Give the section a title that will help identify the component. This also doubles as an anchor link for the section when using the Current Page Section Menu on Basic Pages
    • Description - Short description that helps further explain the section
    • Button Color - Color of the CTA button (green, gold)
    • Button Link URL / Text - Identify where the button should take visitors and what the button should say
  • Title (required) - Individual accordion title, used to open and close each section
  • Body (required) - Text that will be displayed when the section is open

Instructions start on the Create or Edit Page within a piece of content.

  1. Create Content using the Add Component button
  2. Choose Accordion from the list of Components in the Text section
    OR
    Edit Content using the Edit button
  3. Switch the Published field on or off for the component to be published or unpublished
  4. (required) Choose the Background Color for the component (white, black, gray)
  5. (required) Choose how the Display Placement for the header should be
    1. Header on Top - Accordion Below
    2. Header on Left - Accordion on Right
  6. (Optional) Section Header allows for the creation of a Call to Action (CTA) to display above or to the left of the accordions.
    1. Include in Jump Links Menu (defaults to yes)
    2. Section Title
    3. Description
    4. Button Color (green, gold)
    5. Button Link URL / Text
  7. Set the Title which will be used to open or close the accordion section
  8. Give the Body some content to display when the accordion is open
  9. Click Add Accordion item to add more accordion sections
  10. Repeat steps 7-9 until desired number of accordion sections has been reached

Samples

Below you will find examples of the different types of accordions you can use on the site.

Header on Left

Accordions can display a Section Header at the top above the accordion or to the left of the accordion.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header on Top

Accordions can display a Section Header at the top above the accordion or to the left of the accordion.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.