...
This demo form illustrates panels that work this way. The caret character in the top right corner of each panel can be used to expand and collapse it.
| Note | ||
|---|---|---|
| ||
Note that some versions of GlobalForms do have a "Collapsable" option in the component's properties, but this option is not intended for the purposes outlined here and this component option should be ignored. |
Implementation
Setting up collapsing panels on a form does involve a small amount of Javascript and CSS. Once your GlobalForms system is setup to support it, adding collapsing panels is very straightforward.
...
- Add a new HTML Component to the top of the form and reference the CSS file. The properties should look like this:
- Add a new HTML Component to the top of the form and reference the JS file. The properties should look like this:
- Add a panel to the form. Any panel that should have Collapse / Expand ability needs a value added to the Custom CSS Class property of the component. Possible values are panel-body-closed or panel-body-open. Use the appropriate class to identify the panels default state of open or closed.
...