View Change Extension
Use this extension to show or hide elements depending the state of a input-checkbox element. The extension needs to be bound directly on the checkbox element. It requires two jQuery selector parameters that point the elements that will be displayed when the checkbox is checked and when it isn't.
Options
On State Selector | data-view_change-on | String | Required
Define a jQuery selector that selects the elements to be displayed when the checkbox is checked.
Off State Selector | data-view_change-off | String | Required
Define a jQuery selector that selects the elements to be displayed when the checkbox is unchecked (required).
Closest Parent Selector | data-view_change-closest | String | Optional
Use this jQuery selector to specify which "closest" element will be the parent of the element search. This option can be useful for shrinking the search scope within a single parent container and not the whole page body.
Example
In the following example only the labels that reside inside the div.container element will be affected by the checkbox state. The label outside the container will always be visible.
<div class="container">
<input type="checkbox" data-gx-extension="view_change"
data-view_change-on=".label-primary"
data-view_change-off=".label-secondary"
data-view_change-closest=".container" />
<label class="label-primary">Test Label - Primary</label>
<label class="label-secondary">Test Label - Secondary</label>
</div>
<label class="label-primary">Test Label - Primary</label>