Expand/Collapse Content Tool

The Expand/Collapse tool is a Main Body tool that is designed to provide a way to display additional information if desired, allowing the user to scan the headings first.

Access Main Body/Right Side

In the CMS4Schools Main Website Administration Navigation Builder click on the Main Body content of the page where the Expand/Collapse Content will be displayed.

Add Expand/Collapse Content Tool

1. Add Tool to this page: Select Expand/Collapse Content from the list
2. After: Choose the position of the tool. The default is at the bottom of the page. The first tool added will only have the "Place at top of page" option. When there is more than one tool, select the item you want to add the tool after.
3. Select Add to add the tool to the page.

Expand/Collapse Content 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 (-).