Expandable

Basic Info

The Expandable component allows you to insert rich text in such a way that when site visitors click on specially formatted abbreviated copy, the component expands to show all of your content. This component is most helpful when you want to create a visually interesting way to highlight questions or information, like an FAQ section.

If a site visitor attempts to search for something on your page using command+F or "find on page," they will not be able to search any content that is being hidden by the Expandable. Don't include office hours, phone numbers, email addresses, or other important or frequently searched content within an Expandable component.

Anchors will only work within an Expandable when content for that particular component is no longer hidden. Don't link to an anchor within the hidden text of an Expandable from outside of that component.

Example

Tutorial

  1. Navigate to and open your page.
  2. Add the Expandable component.
  3. A new Expandable component without content will appear on the page as a placeholder.
  4. To edit the component:
    1. Right-click on the component and select Edit; or
    2. Double-click on the component.
  5. An edit window will appear that will allow you to customize the displayed and collapsed text included in the component.
    1. Displayed Text: This is a required field. This text is displayed is a stylized fashion alongside a + indicating to site visitors that there is additional content to explore.
    2. Collapsed Text: This is a required field. This is the text that is hidden within the component and will expand when site visitors click the + or Displayed Text. All text entered here can be formatted using the same options available within the Rich Text component. While there is no character limit, keep in mind the interactive nature of this component when determining how much text to include within the collapsed section.
  6. Click OK.

^ Back to top

Accessibility Info

Usability

  • Your displayed text is treated similar to anchor links by screen readers. Displayed text should be descriptive and provide context to indicate to site visitors that there is additional content to explore.
  • Text hidden within the Expandable is not searchable within the page, so don't include office hours, phone numbers, email addresses, or other important or frequently searched content.

^ Back to top

Screenshots

Component Tutorial: Expandable edit window