Expandable Content

Expandable containers are ways to show and hide content one at a time.

How to Use
  • Expandable Content containers are ideal for areas where it is important to list multiple categories of information on a page that a user could select from.
  • Expandable containers allow the length of the page to be condensed and more easily scanned.
  • It is recommended to keep titles shorter and more concise.
  • Content within the expanded container can include text, images, links and lists.
  • Containers may be set to default to an open view (expanded), if needed.
How to Build

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

  • Click the Add New Element plus icon to add a component to the page.
  • An Add Element window will appear, choose the Expandable option.
  • The settings dialog box will appear. Fill in the item name.
  • Click Save changes.
  • Click the plus sign inside the tab to add content. You can use the Row component to add columns inside the item. Do not use advanced components such as  additional expandable items, tabs, callout rows, etc. inside tabs.
  • Repeat steps to create a set of expandable items.

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

Content Guidelines
  • 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.

Example

Example 1

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.

Example 2

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.

Example 3

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.

Example 4

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.