Expand/Collapse Your Stage
Several Jetpack "stage types" offer multiple stage stages.
• 2 state super header
• 3 state super header
• Video Wall
• Expandable Banner
You can flip between these states in the workshop by using the stage stage pulldown located in the top center of the page. This allows you to prepare your creative and set the appropriate size for each state by modifying the stage properties.
stage state - pulldown
When building one of these units you will want to have your creative swap between these states using Actions.
When a unit, primarily a Superheader, has multiple states, these states will generally appear as ‘collapsed’ 'default' and ‘expanded’. A unit having a collapsed state is generally required, but also serves as a handy way for a user to easily minimize that ads display on a page.
While the dimensions of these states can vary, in general, the ‘Collapsed’ state displays at anywhere between 40-100px. While the ‘Default’ state displays anywhere between 200-500px. 'Expanded' allows a 3rd state which can be taller.
Simply add your 'CLOSE' button to your 'Default' state. In your buttons Actions, add the Trigger of 'Click'. For your buttons 'Event', add 'Stage' as your handler, and select 'Collapse Height' for your action.
3 State Superheader - stage states.
| 3 state superheader Stage State | Actions to Call this state |
|---|---|
| Collapsed | + Collapse Height use this setting for superheader |
| Default | + Default Height use this setting for superheader + Default Width + Default Height/Width |
| Expanded | + Expand Height use this for superheader Below are used for expandable banners only + Expand Width + Expand Width Auto + Expand Width Left + Expand Width Right + Expand Height/Width |
| All | *This is only available in the workshop - and allows you to see all stage-states at one time. |
Similarly, for your 'EXPAND' function on your collapsed state, add your button to the Collapsed stage state. In your buttons Actions, add the Trigger of 'Click'. For your buttons 'Event', add 'Stage' as your handler, and select 'Default Height' for your action.
Updated about 7 years ago