With the release of XF 2.0.3 we can now use a cookie to store the toggle state of the collapsed nodes which means when the page is loaded the collapsed nodes will load collapsed, before there was a noticeable flicker on page load as the storage type was only stored locally in a users browser.
The changes are:
Before:
After:Code:<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-xf-init="toggle-storage" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>
=======Code:<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}" data-xf-click="toggle" data-xf-init="toggle-storage" data-storage-type="cookie" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>
Before:
After:Code:<div class="block-body block-body--collapsible is-active">
Code:<div class="block-body block-body--collapsible {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}">