Toggle

Documentation for toggle javascript module.

Files

app/scripts/modules/toggle.js

Toggle

Toggle javascript handles basic toggle function of 'default/active' states. It can be used for example to show/hide elements (with proper css), but it is also used for example in dropdown buttons. It toggles .active class on target element and also on itself.

Basic usage

The most basic usage setup is to use class .js-toggle, on element that should trigger toggle function and set target with data attribute data-target.

Note

In case you can not use attribute data-target because of conflict with other modules you can also use data-toggle-target.

Example:

target element state:

Code:

<!-- target -->
<div id="toggleme">affected element</div>

<!-- toggle -->
<button class="btn js-toggle" type="button" data-target="#toggleme">Toggle</button>

Target parent

In the example below is shown how to target parent element.

Example:

target element state:

Code:

<!-- target -->
<div>
  <div>affected element</div>

  <!-- toggle -->
  <button class="btn js-toggle" type="button" data-target="parent">Toggle</button>
</div>

Target parent - 2 hops

In the example below is shown how to target parent's parent element.

Example:

target element state:

Code:

<!-- target -->
<div>
  <div>
    <div>affected element</div>

    <!-- toggle -->
    <button class="btn js-toggle" type="button" data-target="parent" data-parent-hop="2">Toggle</button>
  </div>
</div>

Target next

In the example below is shown how to target element next to toggle element.

Example:

target element state:

Code:

<!-- toggle -->
<button class="btn js-toggle" type="button" data-target="next">Toggle</button>

<!-- target -->
<div>affected element</div>

Target previous

In the example below is shown how to target element previous to toggle element.

Example:

target element state:

Code:

<!-- target -->
<div>affected element</div>

<!-- toggle -->
<button class="btn js-toggle" type="button" data-target="previous">Toggle</button>

Dropdown

In the example below is shown how dropdown like behavior of toggle.

Note

Click anywhere in document will toggle off active state.

Example:

target element state:

Code:

<!-- target -->
<div>affected element</div>

<!-- toggle -->
<button class="btn js-toggle" type="button" data-target="previous">Toggle</button>

Toggle icon

In the example below is shown how to toggle icon on toggle element.

Warning

Do not forget to use .js-icon class on icon element.

Example:

target element state:

Code:

<!-- target -->
<div>affected element</div>

<!-- toggle -->
<button class="btn js-toggle" type="button" data-target="previous" data-toggle-icon="close"> Toggle
  <i class="icon icon-right icon-s js-icon">check</i>
</button>

Toggle text

In the example below is shown how to toggle text on toggle element.

Warning

Use only if toggle element contains only text.

Example:

target element state:

Code:

<!-- target -->
<div>affected element</div>

<!-- toggle -->
<button class="btn js-toggle" type="button" data-target="previous" data-toggle-text="toggle off">Toggle on</button>

Options

Options can be passed via data attributes. Append the option name to data-, as in data-target="".

Name	Type	Default	Description
target	`string/'parent'/'next'/'previous'`	`null`	Select target String: any jQuery selector as for example `#id`, `.class` ... parent: targets parent element next: targets next element previous: targets previous element
parent-hop	`number`	`0`	In case you need to get parent's parent, or even upper you can specify count of hops. Use in combination with `data-target="parent"`.
toggle	`'dropdown'`	`null`	Set the behaviour of toggle as if it was dropdown (remove active state if clicked somewhere else than dropdown element).
toggle-icon	`string`	`null`	Use this attribute if your toggle element contains icon (important use `.js-icon` on icon element) and you want to change it while active.
toggle-text	`string`	`null`	Use this attribute if you want to change text in toggle element while it is active.

Events

Event Type	Element	Description
toggle-click	`document`	This event fires whenever a toggle element is clicked.