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 FAQ or Question and Answer pages.

View the Page Content article to learn more about adding a tool and general tool settings.

Tool Options

Tool Actions

1. Add Item: Choose to add an item to the tool. See the Add Item section below for more information.

Tool Content

1. Initial Content: Displays the initial content of the items in the tool
2.  Preview the selected item in a new tab.
3.  Edit the selected item
4.  Delete the selected item.

Add Item

After adding the Expand/Collapse Content tool to the Main Body, select "Add Item" to add an item to the tool. Note that multiple items can be added to the tool.

Initial Content

1. Position: Controls the order of the item added to the tool. By default, the new item will be added to the top of the tool.
2. Initial Content: Enter the content that should display when the item is collapsed into the Inital Content text editor. See the Text Editor article for more information about adding content within the text editor. 

Expanded Content

1. Expanded Content: Enter the content that should display when the item is expanded into the Expanded Content text editor. See the Text Editor article for more information about adding content within the text editor. 
2. Image: Drag and drop an image file or select to browse for an image on your device.
   1. Alt Text: Provide text that will show when the mouse cursor hovers on the picture. This is important for accessibility for users that are utilizing screen readers and not visually seeing the screen.
   2. Caption: If desired, add text that you would like to display below the image.
3. Display: 
   1. Image Width: Set the desired image width using the radio buttons. If "Custom Width" is chosen, enter the number of pixels wide the image should be. If your image is wider than the selected width, it will be scaled down to that width.
   2. Image Alignment: Set the justification for the image. If "Above" or "Below" is chosen there is the additional option of choosing left, right, or center.
4. Link: 
   1. Link Address for Image: Add a URL to have the link open when the image is selected.
   2. Browser Window Type: Select New Window or Current Window. The current window option should be used for linking to pages within your site while the new window option should be used for external pages.

Tool Display

Collapsed Content

This image shows an Expand/Collapse Content tool with two items. The initial display for visitors will show all the items collapsed as seen above.

Expanded Content

Visitors can select to expand the items as desired. This image shows an Expand/Collapse Content tool with two items expanded.