Toggles are a javascript library of data-cc-toggle- attributes that allow you to toggle classes on and off (or activate and deactivate). No CSS classes are required for the library to work its all done using the data-cc-toggle- attributes. They can be used for simple show/hide toggles, accordions, tabs, modals, drawers and more bespoke integrations.

During this document we will refer to triggers and target elements. Triggers are the elements that are interacted with. Target elements are that they will affect. For most examples triggers will be buttons and target elements will be the content.

When the target elements are activated, the class is-active is applied. You can then use the .u-toggle CSS pattern within Chop Chop to show/hide what you need. The default will just do display: none; to display: block; but sometimes it is also super handy to animate heights on an element, this can be done by just editing the SASS rather than in the javaScript as it gives us greater flexibility on how we display the content.

You can intialise any toggle widget automatically or with javaScript.

Add any of the following to the HTML.

.js-cc-toggle
[data-cc-toggle-action]
[data-cc-toggle-trigger-activate]
[data-cc-toggle-trigger-deactivate]

$('.selector').toggle();

Please Note:

An instance of the toggle widget gets created for every element in the target chain. If the widget is not created using any of the default selectors outlined above, it will not be available until it is instantiated as part of a chain.

toggle switches back and forth between activate and deactivate applies is-active to target.

default: 'toggle'
options: 'toggle', 'activate', 'deactivate'

target a CSS selector.

default: ''
options: jQuery selector

target-callback is for when you need to call back to a selector but not have the selector cascade to its target. It allows a selector to be chained, without it having its targets or cascades also called. Most useful for group items to call back to a button or link.

default: ''
options: jQuery selector

trigger type of event. Can also use trigger-activate and trigger-deactivate. Useful for a tooltip style if using mouseenter.

default: 'click'
options: accepts any javascript event, e.g. `mouseenter`, `mouseleave`

trigger-type only activate if on element itself, not descendant. Example usage on .modal pattern. Prevents bubbling issue.

default: 'all'
options: 'all', 'direct-only'

group is an arbitrary value that relates elements together. This is useful on .accordion or .tabs patterns.

default: ''
options: string

stateful boolean to determine whether an element receives is-active or is-inactive classes. Example is a close button that doesn't need to maintain a state.

default: true
options: boolean(true/false)

Add the attribute data-cc-toggle-keyboard-close="true" to elements to support keyboard closing The keyboard keyCode can also be overridden using data-cc-toggle-keyboard-close-key-code="27".

When instantiating with javascript, use option keys keyboardClose, and keyboardCloseKeyCode.

default: false
options: boolean(true/false)

As we use jQuery UI we have access to all of the libraries methods as wells as some of our own: https://api.jqueryui.com/jquery.widget/

####activate

$('.modal').data('chopchop-toggle').activate();

####deactivate

$('.modal').data('chopchop-toggle').deactivate();

####toggle

$('.modal').data('chopchop-toggle').toggle();

####isActive

$('.modal').data('chopchop-toggle').isActive();

####activate

This event fires when the activate method is called and the element is made visible to the user.

$('#overlay').on('toggleactivate', function(){
    // run something...
});

####deactivate

This fires when the deactivate method is called and the element is hidden from the user.

$('#overlay').on('toggledeactivate', function(){
    // run something...
});