You can specify elements that listens to event for activation, and targets that gets activated.

The query is inside container, only when specifying elements and targets with id the query is on all the document.

SyntaxDefault / ArgumentsDescription
Optionelements:Query'[data-xt-overlay-element]'Elements query
Optiontargets:Query'[data-xt-overlay-target]'Targets query
OptionelementsInner:QueryfalseInner elements query, they reflect elements activation
OptiontargetsInner:QueryfalseInner targets query, they reflect targets activation
Optionexclude:QueryfalseExclude elements and targets if they matches the query

See slider elements exclude for demo.


If you need to toggle multiple elements or targets with the same element or target assign data-xt-group to elements and the associated targets.

Attributedata-xt-groupdata-xt-group="my-group,another-group"Group or multiple groups on elements and targets
SyntaxDefault / ArgumentsDescription
OptiongroupSeparator:String','Separator for multiple groups

You can disable same group elements activation with the option groupElements: false.

SyntaxDefault / ArgumentsDescription
OptiongroupElements:BooleantrueElements activation as group


See toggle class for more info.

You can style and animate class names used by the component.

SyntaxDefault / ArgumentsDescription
Optionclass:StringonClass name for activation
OptionclassIn:StringinClass name for in animation
OptionclassOut:StringoutClass name for out animation
OptionclassDone:StringdoneClass name for in animation done
OptionclassInitial:StringinitialClass name for initialization
OptionclassBefore:Stringdir-beforeClass name for before direction activation
OptionclassAfter:Stringdir-afterClass name for after direction activation
OptionclassSkip:ObjectfalseSkip class activation and deactivation e.g.: { elements: true, elementsInner: true, targets: true, targetsInner: true }

You can set initial activation by adding on to the elements or targets.

Additionally on component initialization the attribute [data-xt-overlay-init] gets added to the object.


See toggle quantity for more info.

You can specify min and max concurrent activations. The min option is fulfilled on initialization, the max options deactivates the first activated when max is reached.

SyntaxDefault / ArgumentsDescription
Optionmin:Number0Minimum number of concurrent elements activated
Optionmax:Number1Maximum number of concurrent elements activated


See toggle event for more info.

You can specify on and off events for the interactions.

SyntaxDefault / ArgumentsDescription
Optionon:String|false'click'List of space separated events to listen for activation
Optionoff:String|false'click'List of space separated events to listen for deactivation
OptionmouseParent:String|BooleanfalseFor mouse events use element parentNode or closest query

There some other event options.

SyntaxDefault / ArgumentsDescription
OptioneventLimit:Query'.xt-event-limit, .xt-overlay'Block on and off events inside selector
Optionopenauto:BooleantrueTrigger the event openauto.trigger.xt inside elements or targets to automatically activate openauto: true
Optioncloseauto:BooleantrueTrigger the event closeauto.trigger.xt on window to automatically deactivate current activation if closeauto: true
OptioncloseDeep:Query'.xt-dismiss'Query Node inside elements or targets to deactivate on click (also nested, can be a inner node)
OptioncloseInside:Query'.xt-backdropQuery Node inside elements or targets to deactivate on click (no nested, must be exactly that node)
OptioncloseOutside:QueryfalseQuery Node on document to deactivate on click (automatically excludes nested inside elements and targets)

If you want a inner node that trigger off on click use .xt-dismiss.


You can link the activation in the url hash to be linkable and more usable, hash activation has precedence over class activation.

Hash attribute data-xt-hash can be on elements or targets, also hash activates on hash location change.

SyntaxDefault / ArgumentsDescription
Optionhash:String|false[data-xt-hash]Link activation in location hash using elements and targets attribute hash value

Try the demo on a new page to preview location hash changes.

Navigation and Loop

See toggle navigation and loop for more info.

Class Body

You can set body classes on activation, remember to keep default classBody classes.

SyntaxDefault / ArgumentsDescription
OptionclassBody:String'xt-scrollbar-overlay'Add class to html on activation


See scrollto toggle for more info.