Toggle

Hide, switch or change the appearance of different contents through a toggle.

Usage

The toggle module is loaded asynchronously and is initialised using data-module="Toggle" on the toggler element.

By default the module toggles the default active class (is-active) on itself.

<button class="c-button" data-module="Toggle">Click to toggle me</button>

Options

Once

You can set the toggle module to only toggle once (data-options='{"once":true}').

<button class="c-button" data-module="Toggle" data-options='{"once":true}'>You can only turn me on</button>

Target

You can also toggle an active class on another element using the target option (data-options='{"target":"#mydiv"}').

<button class="c-button myButton" data-module="Toggle" data-options='{"target":"#mydiv"}'>
    Click to toggle the div
</button>
<div id="mydiv"></div>

You can also pass in the string 'parent' to specifically target source element's direct parent element.

<div id="mydiv">
  <button class="c-button myButton" data-module="Toggle" data-options='{"target":"parent"}'>
    Click to toggle the div
  </button>
</div>

You can also multiple element by passing in an array (data-options='{"target":["#mydiv1","#mydiv2"]}').

<button class="c-button myButton" data-module="Toggle" data-options='{"target":["#mydiv1","#mydiv2"]}'>
    Click to toggle both divs
</button>
<div id="mydiv1"></div>
<div id="mydiv2"></div>

Active class

You can also toggle an custom active class using the 'activeClass' option (data-options='{"activeClass":"is-alt-active"}').

<button class="c-button myButton" data-module="Toggle" data-options='{"activeClass":"is-alt-active","target":"#mydiv3"}'>
    Click to toggle the div
</button>
<div id="mydiv3"></div>

Hide

Instead of toggling an active class, you can toggle an elements display property by using the 'hide' option (data-options='{"hide":true}). This toggles the 'hidden' attribute on the target(s).

Note If you use this option, the active class is no longer toggled.

<button class="c-button myButton" data-module="Toggle" data-options='{"target":"#mydiv"}'>
    Click to hide/show the div
</button>
<div id="mydiv"></div>