3 Min.cornerstone

Toggleable

In this article, we're going talk about shared states and actions for elements like Off canvas, dropdown and more.

Closing the toggleable
Opening the Toggleable
Programmatically

Closing the toggleable

data-x-toggle-close

Using Custom Attributes you can control all toggleable elements using Custom Attribute data-x-toggle-close=1 on another element. This can be useful if you have an element inside the element that needs to close the element as well as do something else. Internally the close button uses this.

Opening the Toggleable

data-x-toggle

First off the attribute you need is data-x-toggle. This tells the toggleable library to treat this as an open request. There are different types of opening in our theme.

data-x-toggle=1 default and direct open. Most of the time this is all you need.
data-x-toggle=collapse default same as 1.
data-x-toggle=layered same as 1, but opens inner toggles and has layer effects. Disabling scroll is a layer effect.
data-x-toggle=collapse-b For use in X / Pro built in headers for collapsing.
data-x-toggle=tab If trying to open a specific tab

data-x-toggleable

The next you need is the ID of the toggleable you are trying to open. This can be set as well from a custom attribute. Internally this is the Style ID plus the Element ID (EX e356-e9). So in your custom element you would place something like data-x-toggleable=YOUR_TOGGLE.

Programmatically

We offer a couple of functions to control the state of a toggleable.

/**
 * Returns state by toggle id
 *
 * @param {String} id
 * @return {Boolean}
 */
window.xToggleGetState("my-toggleable");


/**
 * Returns state by DOM Element
 *
 * @param {HTMLElement} domElement
 * @return {Boolean}
 */
window.xToggleGetStateFromNode(domElement);

/**
 * Update toggle state to true or false
 *
 * @param {String} id
 * @param {Boolean} state
 *
 */
window.xToggleUpdate(id, state);

/**
 * Remove toggle from being updated by the toggleable library
 *
 * @param {String} id
 *
 */
window.xToggleDelete(id);

// Find each mobile link
$('.x-navbar .x-nav-wrap.mobile a').each(function() {
  // On Click
  $(this).on('touchend click', function(){

    // Timeout
    setTimeout(function() {
      // Toggle mobile menu to off
      window.xToggleUpdate('x-nav-wrap-mobile', false)
    }, 1000);

  });
});

See something inaccurate? Let us know