The Collapsible Panel is a container that holds other controls and provides an easy expand/collapse mechanism.
Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).
This section control is used to give your Coaches a clean and sleek appearance. Use the Collapsible Panel to put other controls inside of it, like a text box for example.
Behavior
Initially Collapsed Panel will be closed on page load
Panel Group Name Group multiple panels together, when one is expanded the other will be collapsed regardless of where they are on the page, or how they might be nested.
Appearance
Color Style
Width Value in px, %, em For example: 50px, 20%, 0.4em, if no unit is specified px is assumed
Height Value in px, %, em For example: 50px, 20%, 0.4em, if no unit is specified px is assumed
Example
These are the configuration option settings...
This is the result...
Notice the icon in the top right corner, where you can click to expand or collapse this section.
Events
With the Collapsible Panel section, there are 3 types of event handlers:
- On Load When the page loads
- On Expand When the Collapsible Panel is expanded
- On Collapse When the Collapsible Panel is collapsed
You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.
Methods
For detailed information on the available methods for this control, access the JS Doc file.
Related Article(s)
- Author: Courtney Silva
- Date Created: June 5, 2015
- Date Modified: July 27, 2015
Comments