esl Exadel Smart Library
  • Core
  • Components
  • Examples
Get started
Exadel Smart Library
  • Search
  • Introduction
    • Installation Guide
    • Browser Support
    • Our Roadmap
  • Core
    • ESL Base Element
    • new ESL Mixin Element
    • ESL Media Query
    • ESL Traversing Query
    • new ESL Event Listeners
    • ESL Utils
  • Components
    • beta ESL A11y Group
    • ESL Alert
    • beta ESL Animate
    • beta ESL Footnotes
    • ESL Image
    • ESL Media
    • ESL Panel
    • ESL Panel Group
    • beta ESL Popup
    • ESL Scrollbar
    • beta ESL Select
    • beta ESL Select List
    • ESL Tabs
    • ESL Toggleable
    • ESL Trigger
  • Examples
    • Accordion
    • beta Animate
    • Embedded Audio
    • Embedded Video
    • beta Footnotes
    • Image
    • Menu
    • Notification
    • beta Popup
    • Scrollbar
    • beta Select Dropdown
    • beta Select List
    • Tabs
    • Toggleable

ESL Toggleable

Related Components

  • ESL Trigger
  • ESL Panel
  • ESL Popup

Related Examples

  • Toggleable
  • Accordion
  • Tabs
  • Menu

ESLToggleable - a custom element, that is used as a base for "Popup-like" components creation.

ESLToggleableDispatcher - plugin component, that prevents activation of multiple ESLToggleable instances in bounds of managed container. Usually (and by default) binds to document.body. Uses native DOM events to manage controlled instances state.

Use ESLToggleableDispatcher.init() to initialize (and bind) ESLToggleableDispatcher.


Toggleable Attributes / Properties

  • open - active state marker

  • body-class - CSS class to add on the body element

  • active-class - CSS class to add when the Toggleable is active

  • group (groupName) - Toggleable group meta information to organize groups

  • no-auto-id - Disallow automatic id creation when it's empty

  • close-on (closeTrigger) - Selector to mark inner close triggers

  • close-on-esc - Close the Toggleable on ESC keyboard event

  • close-on-outside-action - Close the Toggleable on a click/tap outside

  • initial-params - Initial params to pass to show/hide action on start

  • default-params - Default params to merge into passed action params

Toggleable Implementation API

  • onShow - 'show' actions to execute when the instance becomes active
  • onHide - 'hide' actions to execute when the instance becomes inactive

Toggleable Public API:

  • show - trigger element activation
  • hide - trigger element deactivation
  • toggle - toggle element state

Events

  • esl:before:show - thrown when toggleable change is going to be activated(open)
  • esl:before:hide - thrown when toggleable change is going to be deactivated
  • esl:show - thrown when toggleable change its state to active(open)
  • esl:hide - thrown when toggleable change its state to inactive

ESL Related Target

ESLRelatedTarget is a custom mixin that can be used in combination with ESLToggleable instance (or any inheritor) to link it with one or more other ESLToggleable to sync their states.

Mixin attaches to the element via the esl-related-target attribute. The attribute's value defines a selector to find the corresponding element. Activation (set open state) or deactivation of the related target happens when the corresponding esl:show or esl:hide DOM events are dispatched on the current host element.

Mixin supports esl-related-target-action attribute to define required for synchronization actions:

  • all (default) - to synchronize both: show and hide events of the observed toggleable
  • hide - to synchronize only hide events of the observed toggleable
  • show - to synchronize only show events of the observed toggleable

To make cross-reference (bidirectional binding) of toggleables you need to cross-reference both of the toggleables:

<esl-toggleable class="first" esl-related-target=".second"></esl-toggleable>
<esl-toggleable class="second" esl-related-target=".first"></esl-toggleable>

ESL v4.2.0 © 2023 Exadel, Inc
Core Team Contributors: Alexey Stsefanovich, Julia Murashko, Yuliya Adamskaya, Dmytro Shovchko, Anna Barmina, Anastasiya Lesun
Design by Iryna Pavlenko