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!

Did this answer your question?