FreddieMac.com

Accordions

Examples of Standard Accordions and FAQs

Accordion Options

Avoid nesting Accordions inside of Tabs -- doing so results in a complex UI that is not mobile friendly. As long as your accordion is not inside a component with controlled height, select the option to Allow Multiple Sections to Expand at Once. 

If you'd like to expose the contents of the first item, you can select the option to Expand First Section.

If you'd like to include an Expand All link, select the Show Expand All Button option.

  • Expand All will only display for accordions with 3 or more entries.
  • If the accordion has a title, the Expand all link is aligned to the right, if it does not have a title, the link is aligned to the left.

For Accordions that display as Tabs at desktop widths, refer to Accordion/Tab Combo.

First section collapsed

First section expanded

FAQ Options

FAQs are a variation of the accordion pattern. Each group of FAQs starts at number 1, and the questions are auto-numbered so you can rearrange them without having to edit the numbers.

First section expanded

  1. Excepteur sint occaecat cupidatat non proident?

    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.

  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt?

    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.

  3. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.?

    Lorem ipsum dolor.

  4. Aenean lacinia bibendum nulla sed consectetur?

    Lorem ipsum dolor. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

First section collapsed

  1. Excepteur sint occaecat cupidatat non proident?

    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.

  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt?

    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.

  3. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.?

    Lorem ipsum dolor.

  4. Aenean lacinia bibendum nulla sed consectetur?

    Lorem ipsum dolor. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.