Toggles

  • Requires jQuery
  • Requires toggles.js

A versatile toggle tool to show/hide the target element from any trigger element.

  • Trigger: Element that fires the show/hide
  • Toggle: Element to show/hide
  • Trigger and toggle can be anywhere, trigger can even be placed into toggle
  • A toggle can have several triggers
  • A single trigger can trig several toggles

Overview

Click this trigger paragraph to show/hide the toggle

This is the toggle element
This is the toggle element. Its trigger gets "active" class element
Dismiss example, auto disappear. close forever

Toggle group

When wrapped into a single container with custom attribute my-toggle-group, triggers and toggles behave like tabs.

Tab 1 normally opened
Tab 2
Tab 3
Tab 1 normally closed
Tab 2
Tab 3

Tweaking the toggle group feature with multiple toggles with same id, toggle groups can behave like tags:

Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
Content 7

If a trigger attribute is set to my-toggle="my-toggle-group", then clicking on it shows all the toggles contained into its toggle group container my-toggle-group.

Content 1 with tag 1
Content 2 with tag 1
Content 3 with tag 1
Content 4 with tag 2
Content 5 with tag 2
Content 6 with tag 3

If all toggles are normally active, only the my-toggle="my-toggle-group" trigger is set as active.

Content 1 with tag 1
Content 2 with tag 1
Content 3 with tag 1
Content 4 with tag 2
Content 5 with tag 2
Content 6 with tag 3

Toggle options

By default, the click is the event used to show hide toggles. Add options by adding specific strings into the custom attribute my-toggle-options on the trigger. Each trigger can have its own toggle options

Hover

Specified toggle is shown on mouse hover / touch start (touch devices), hidden on mouse leave / touch end (touch devices). Add hover into my-toggle-options attribute.

Content shown by hover (touch on touch devices)
Content 1 with tag 1 is shown by hover (touch on touch devices)
Content 2 with tag 1 is shown by hover (touch on touch devices)
Content 3 with tag 1 is shown by hover (touch on touch devices)
Content 4 with tag 2 (default behaviour: click)
Content 5 with tag 2 (default behaviour: click)
Content 6 with tag 3 (default behaviour: click)

Mouseenter

Specified toggle is shown on mouse hover / touch start (touch devices), but hidden only on click / touch start. Add mouseenter into my-toggle-options attribute.

Content shown by mouseenter (touch on touch devices)
Content 1 with tag 1 is shown by mouseenter (touch on touch devices)
Content 2 with tag 1 is shown by mouseenter (touch on touch devices)
Content 3 with tag 1 is shown by mouseenter (touch on touch devices)
Content 4 with tag 2 (default behaviour: click)
Content 5 with tag 2 (default behaviour: click)
Content 6 with tag 3 (default behaviour: click)

Icon rotate

Elements into the trigger with class containing icon- rotate 180 degrees on state change. Add icon-rotate into my-toggle-options attribute.

Content

CSS Classes

.mod-on and .mod-off classes allows to display elements according to toggle state on triggers.

Content

Methods

myToggle.update(); Start toggle events or refresh if DOM changed.

myToggle.open(id); where id is a string. Opens the specified toggle name.

myToggle.close(id); where id is a string. Opens the specified toggle name.

Usage examples

Cookie agreement pop