Expandable

On this page:

Basic Info | Example | Tutorial | Accessibility Info | Screenshots

Basic Info

Use the Expandable component to create content that can be collapsed and displayed by clicking a plus sign.  

This component is best used to provide a visually interesting way to highlight questions or information, such as an FAQ section.

Note: If a site user searches for something on the 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 placeholder icon will display in the space.
   
4. To edit the component, click or touch the placholder. The component toolbar will display along the top of the space.
5. Select the wrench icon to configure.
6. Configure 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.
      
7. Click or touch the check box to save and close.  

^ 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

^ Back to top