xF2 Template Modification Collapsible Node Categories

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:

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>

After:

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:

Code:

<div class="block-body block-body--collapsible is-active">

After:

Code:

<div class="block-body block-body--collapsible {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}">