esl Exadel Smart Library
  • Core
  • Components
  • Examples
Get started
Exadel Smart Library
  • Search
  • Introduction
    • Installation Guide
    • Browser Support
    • Contribute to ESL
  • Core
    • ESL Base Element
    • ESL Mixin Element
    • ESL Media Query
    • ESL Traversing Query
    • new ESL Event Listeners
    • ESL Utils
  • Components
    • beta ESL A11y Group
    • ESL Alert
    • 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
    • beta ESL Share
    • ESL Tabs
    • ESL Toggleable
    • ESL Trigger
  • Examples
    • Accordion
    • Animate
    • Embedded Audio
    • Embedded Video
    • beta Footnotes
    • Image
    • Menu
    • Notification
    • beta Popup
    • Scrollbar
    • beta Select Dropdown
    • beta Select List
    • beta Share
    • Tabs
    • Toggleable

ESL Trigger

Related Components

  • ESL Toggleable
  • ESL Panel
  • ESL Popup
  • ESL Tabs

Related Examples

  • Toggleable
  • Accordion
  • Tabs
  • Menu
  • Popup

ESLTrigger - a custom element, that allows triggering ESLToggleable instances state changes.

Attributes / Properties

  • active - readonly marker of active Toggleable target

  • active-class - CSS classes to set on active state

  • active-class-target - target element ESLTraversingQuery selector to set active-class

  • target - target Toggleable ESLTraversingQuery selector (next by default)

  • track-click - MediaQuery to define allowed to track click event media. (Default: all)

  • track-hover - MediaQuery to define allowed to track hover event media. (Default: not all)

  • ignore-esc - to disallow handle ESC keyboard event to hide target element

  • mode - action to pass to the Toggleable. Supports show, hide and toggle values (toggle by default)

  • ignore - selector to ignore inner elements

  • a11y-target - selector of inner target element to place aria attributes. Uses trigger itself if blank

  • a11y-label-active - value of aria-label for active state

  • a11y-label-inactive - value of aria-label for inactive state

  • show-delay - show delay value (number in ms or none)

  • hide-delay - hide delay value (number in ms or none)

  • hover-show-delay - show delay override value for hover (number in ms or none)

  • hover-hide-delay - hide delay override value for hover (number in ms or none)

Events

  • esl:change:active - thrown when trigger changes its state
Contribute to ESL documentation

Found a typo? Have an interesting usage example to share? Want to help improve our documentation? You are very welcome to contribute to ESL. Check out our documentation contribution guide.


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