Namespace: cq-toggle

WebComponents. cq-toggle

Creates the <cq-toggle> web component.

UI Helper that binds a toggle to an object member or to callback functions when toggled.


  • cq-member — Object member to observe. If not provided, then callbacks are used exclusively.
  • cq-action — Action to take. Default is "class".
  • cq-value — Value for the action (i.e., class name). Default is "active".
  • cq-toggles — A comma-separated list of values which are toggled through with each click. The list can include "null". Stringified booleans and "null" are converted to their primitive values. All other values are passed to the Number constructor. If the result is a number (not NaN), the number is used. Otherwise the value is left as a string.
  • cq-toggle-classes — A comma-separated list of classes associated with the toggle setting. If a setting requires multiple classes, they need to be separated with spaces.

Use registerCallback to receive a callback every time the toggle changes. When a callback is registered, any automatic class changes are bypassed.

  • 2015


document.querySelector("cq-toggle").registerCallback(function (value) {
	console.log("current value is " + value);
	if (value != false) this.node.addClass("active");


registerCallback(fc, immediate)

Adds a callback function to the toggle.

Name Type Description
fc function

The callback function to add to the toggle. The function accepts the current value of the toggle as a parameter. The value of this within the callback function is the toggle component.

immediate boolean

A flag that indicates whether to immediately call the callback function after it has been registered with the toggle.

  • 2015