Expandable Content

Expandable Content is a vertically stacked list of headers that can be clicked to reveal or hide content.

How to Use
  • Expandable Content is a vertically stacked list of headers that can be clicked to reveal or hide content.
  • These are useful for shortening long pages of content into broad, easy to scan topics.
  • Expandable containers are best used when you have three or more “sections” or more to show in the dropdown containers.
  • They are not useful if critical content would be hidden from a site visitor and only visible upon expansion.
How to Build

Make sure you are using the “backend editor” to build out the component.

  1. Click the Add New Element plus icon to add a component to the page.
  2. An Add Element window will appear, choose the Expandable option.
  3. The settings dialog box will appear. Fill in the expandable content name.
  4. Click Save changes.
  5. Click the plus sign inside the new element to add content. You can use the Row component to add columns. Do not use advanced components such as  additional expandable content items, tabs, billboards, callout rows, etc. inside an expandable item.

(Refer content guidelines tab to understand how to write for this component)

Content Guidelines
  • Expandable Content is useful if you have a significant amount of content that does not need to be shown all at the same time. It provides a cleaner view of a page and helps the user quickly scan the content to see if what they are looking for is included on the page.
  • It is preferable to use Expandable Content when you have at least three sections.
  • Each item in the list is an H2. Try to limit the number of words in an item title to eight. Headings should be written in Title Case.

Example: Types of Federal Loans

Exceptions: If you are using Expandable Content to store a list of Frequently Asked Questions, it is commonly accepted that the title of each item may exceed a typical heading length of up to 10 words.

Body Content

Content within expandable menus can vary. It is most common to simply include body text, such as a paragraph or use a list style to create the content.

This works well for information that would make the page extremely long, for example, “Types of Federal Loans” would be a good use of an expandable content component as you could have “Stafford Loans”; “Perkins Loans”; “PLUS Loans”; etc. as the items in the list.

Be sure to follow Content Best Practices when writing content within an Expandable Content menu.

Expandable One

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Expandable Two

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.