Toggleable
In this article, we're going talk about shared states and actions for elements like Off canvas, dropdown and more.
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);
Hiding the default mobile menu by nav touch
// 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