Making Page Sections Collapsible and ExpandableLast 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.
Example
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.
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.
