Now let's look at the Advanced setting, this will allow you to set rules to allow the sections to expand and collapse and move to the next view!
Add all the expandable sections you need onto your screen and then you can set the rules and add your information. For this example I am adding three sections and I would like one to close when one opens and so on.
Make sure that you have changed your setting to advanced.
You need to set the rules for each expandable section individually.
Expandable Section 1
view collapsed: you can rename this is you would like to as only you will see this.
component completion status: for this example I am changing to complete.
disabled and expanded: leave these unticked
Next you will need to add an action, (I want the collapsed box to expand)
when the learner does: click
this happens: move to next view
Expanded (still in expandable section 1)
view expanded: you can rename this is you would like to as only you will see this.
component completion status: for this example I am changing to complete.
disabled: leave these unticked
expanded: tick this box
Next you will need to add an action, (I want the collapsed box to expand)
when the learner does: click
this happens: change another components view
change component: expandable section 2
to view: collapsed
completion and visibility options: please leave the blank
Next you can tackle the second expandable section, for this example I want expandable box one to close when I have click on box 2.
Collapsed section
view collapsed: you can rename this is you would like to as only you will see this.
component completion status: for this example I am changing to complete.
disabled and expanded: leave these unticked
Next you will need to add an action, (I want the collapsed box to expand)
You will need to set two actions as you want one box to close and another to open!
First action - (this is to make expandable section 1 to close)
when the learner does: click
this happens: change another components view
change component: expandable section 1
to view: collapsed
Second action (simply click +add action) and this will open a new section.
For this action I want to make expand box two to open as box 1 closes!
when the learner does: click
this happens: move to next view
done
Expanded view
view name: expanded
component completion status: complete
disabled: leave these unticked
expanded: tick this box
Finally you have one last action to complete
when the learner does: click
this happens: change another components view
change component: expandable section 1
to view: collapsed
You can repeat this process for each expandable box you want to add!
Don't forget to SAVE your screen!
Watch this short video to see it in action!
