Making Page Sections Collapsible and Expandable

Last Updated: 03/16/2015 Introduced in Verision: 2.0

Page sections can be hidden and displayed in collapsible sections by placing them within collapsible Container components.

When a user clicks the Expand/Collapse control for a page section, that page section collapses or expands. 

To create a page with collapsible and expandable sections, create a page with a Vertical Stack component, then add Container components to the Vertical Stack. Select each Container that should be collapsed/ expanded and select the Is collapsed checkbox.

When creating a portal page, we use the Simple Page layout, which provides a blank canvas when the Page Designer opens. 


Our example page will contain four vertically-stacked sections – two of which can be expanded or collapsed using the Expand / Collapse link at the bottom of the section.


To begin go to a designer project folder, and select the Create Page/Dashboard button.



In the New Page pop-up, name the new page and click OK to open it in the Page Designer.



In the Page Designer, we will begin creating our page by going to the Toolbox panel, expanding the Containers category and dragging a Vertical Stack component to the workspace. Components placed within this component will be organized from top to bottom and fill the width of the Vertical Stack.


Next, place a Header Container Title component in the workspace.



Then drag several more Header Container Title components to the workspace, and place each one below the others.

With the top-most Header Container Title component selected, in the Properties panel, under the Settings section, we will select the Is collapsed checkbox to make it collapsed by default.



Then select the bottom-most Header Container Title component in the stack and select the Is collapsed checkbox to make this component collapsed by default as well. This completes the page, save it and close the Page Designer.

Back in the portal, test the example page by selecting the page’s thumbnail and clicking the Action link. In the Action menu, select View > Preview Page.



In the resulting pop-up, you are presented with the page. As designed, the top and bottom sections are collapsed.


When we hover our cursor over the the header of the fourth (collapsed) section, a tab containing an Expand link will appear under the bottom-right corner. To expand this section, when you click the Expand link then that section expands.

Additional Resources