Toggle

Documentation for toggle javascript module.

Files

app/scripts/modules/toggle.js

Toggle

Toggle javascript handles basic toggle function of 'default/active' states, icon and text replacement in elements and aria-expanded attribute. It can be used for example to show/hide elements (with proper css), or change a hamburger menu icon to an X when the menu is open. By default it toggles .is-active class on the target element.

Basic usage

To set up a basic toggle trigger element, use [data-toggle="#target-element"]

Example:

target element state:

Code:

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

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

Target parent

The example below shows how to toggle parent element.

Example:

target element state:

Code:

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

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

Target parent - 2 hops

The example below shows how to target parent's parent element.

Example:

target element state:

Code:

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

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

Target next

The example below shows how to target element next to toggle element.

Example:

target element state:

Code:

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

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

Target previous

The example below shows how to togg element previous to toggle element.

Example:

target element state:

Code:

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

<!-- toggle -->
<button class="btn" type="button" data-toggle="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" type="button" data-toggle="previous">Toggle</button>

Toggle icon

The example below shows how to toggle an icon.

Warning

Do not forget to use data-toggle-icon class on icon or it's parent element.

Example:

target element state:

Code:

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

<!-- toggle -->
<button class="btn" type="button" data-toggle="self" data-toggle-icon="#icon-sg-close"> Toggle
  <svg class="icon icon-sg-check icon-right icon--small" role="img" aria-hidden="true"><use xlink:href="#icon-sg-check"></use></svg>
</button>

Toggle text

The example below shows how to toggle text.

Warning

Use only if toggle element contains only text.

Example:

target element state:

Code:

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

<!-- toggle -->
<button class="btn" type="button" data-toggle="self" 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-toggle="".

Trigger element options

Name	Type	Default	Description
target	`string`	`null`	Select targets (comma delimited) String: documnet.querySelector (`#id`, `.class` ...) self: targets the toggle trigger element itself parent: targets parent element next: targets next element previous: targets previous element example: data-target="self, #target, parent"
parent-hop	`number`	`1`	In case you need to get parent's parent, or even higher ancestor, you can specify count of hops. Use in combination with `data-toggle="parent"`.

Target element options

Note

The default action without any target element options toggles .is-active class on the target elemet.

Name	Type	Default	Description
toggle-icon	`string`	`null`	Toggle an icon. Just specify the xlink:href attribute to change.
toggle-text	`string`	`null`	Change text in a toggle element.
toggle-class	`string`	`null`	Specify the class to toggle.
toggle-expand	`N/A`	`null`	When present, toggles aria-expanded attribute.

Events

Event Type	Element	Description
triggerToggle	`trigger element`	Fires whenever a toggle is triggered by clicking the trigger element.
toggle	`toggle target element`	Fires whenever a toggle target element changes it's state.