Expand/Collapse Content Tool

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.

Watch the video.

Expand/Collapse Content Tool Options

1. edit: Add/edit/remove tool heading, change tool status to inactive/active, or schedule a status change.
2. Add Content Item: opens the Add Content Item screen to create a new item.
3. +: Select the “+” to see the item expanded
4. Update: Update the content item
5. Delete: Delete the content item
6. Change Position: Change the position of the tool on the current page
7. Move: Change the location of this tool to another page by selecting the desired category and page
8. Preview: Opens a new tab to preview the page
9. 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.

1. Position After: The drop-down menu is used to position items in relation to one another on the page.
2. Initial Content: The 'heading' of the content.  This will appears with a “+” link in front of it on the page.
3. Expanded Content:  The additional text that appears when the “+” link is clicked.
4. Graphic Upload: Use the Choose File link to select a graphic that will show in the expanded content.
5. Justification: Select the justification of the graphic in the expanded content.
6. Image Width: Select the size of the graphic in the expanded content. The default size is 300 pixels wide.
7. Alt Text: If a graphic is added, always include alternate text that describes the photo for accessibility purposes.
8. Caption: Allows for a caption to be displayed under the image.
9. Link Graphic To: Add a URL to make the graphic a link.
10. 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.)
11. 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 (-).