The Expand/Collapse tool is a Main Body tool that is designed to provide display content with the option of expanding to show additional information. For example, this could be used for a FAQ or Question and Answer page.
Expand/Collapse Content Tool Options
- edit: Add/edit/remove tool heading, change tool status to inactive/active, or schedule a status change.
- Add Content Item: opens the Add Content Item screen to create a new item.
- +: Select the “+” to see the item expanded
- Update: Update the content item
- Delete: Delete the content item
- Change Position: Change the position of the tool on the current page
- Move: Change the location of this tool to another page by selecting the desired category and page
- Preview: Opens a new tab to preview the page
- Delete: Deletes the tool from the page
Add Content Item
In the Expand/Collapse Content tool, select Add Content Item to open the Add Content Item screen.
- Position After: The drop-down menu is used to position items in relation to one another on the page.
- Initial Content: The 'heading' of the content. This will appears with a “+” link in front of it on the page.
- Expanded Content: The additional text that appears when the “+” link is clicked.
- Graphic Upload: Use the Choose File link to select a graphic that will show in the expanded content.
- Justification: Select the justification of the graphic in the expanded content.
- Image Width: Select the size of the graphic in the expanded content. The default size is 300 pixels wide.
- Alt Text: If a graphic is added, always include alternate text that describes the photo for accessibility purposes.
- Caption: Allows for a caption to be displayed under the image.
- Link Graphic To: Add a URL to make the graphic a link.
- Graphic Link Type: If a link is added in the "Link Graphic To:" option use the radio buttons to determine if the URL should open in a New Browser Window (external website) or in Existing Browser Window (internal page.)
- Select Add to add the content item to the tool.
Expand/Collapse Content Display Examples
Example of the collapsed content compared to expanded content that has text and a graphic.
Example of the tool with 2 collapsed items (+) and one expanded item (-).