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
    • beta ESL Share
    • 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
    • beta Share
    • Tabs
    • Toggleable
  • Share us with:

Toggleable

Related Components

  • ESL Toggleable
  • ESL Trigger

Related Examples

  • Accordion
  • Tabs

Click event

This is a toggleable. You can control it using the triggers below.

Triggers

Toggle Show Hide

Hover event

This is a toggleable. You can control it using the triggers below.

Triggers


Class toggle

Toggleable can be used to switch state. You can toggle it using the trigger below.

Triggers

Toggle type

Close On Body Click

This is a toggleable. You can close it if you click outside. Toggle inner toggleable
This is inner toggleable. You can also close it if you click outside.

Triggers

Toggle toggleable

Group of toggleables (click event)

Body class marker active
This is a toggleable. You can control it using the triggers below.
This is a toggleable. You can control it using the triggers below.
This is a toggleable. You can control it using the triggers below.

Triggers


Group of toggleables (hover event)

This is a toggleable. You can control it using the triggers below.
This is a toggleable. You can control it using the triggers below.
This is a toggleable. You can control it using the triggers below.

Triggers

Toggle 1 Toggle 2 Toggle 3

Example with Related Target
Show Hide

Here is the main Toggleable shown

Tempor dictum nunc ac eget neque fringilla vehicula consectetur nullam. Viverra mattis curabitur nullam pellentesque facilisis ut ligula nulla at. Sapien tincidunt nulla aenean augue nibh nibh vulputate dictum nullam. Arcu blandit etiam finibus vivamus rhoncus ligula proin venenatis facilisi. Augue odio dictum et ultrices eget facilisi facilisis congue mauris. Vulputate dictum et tellus tincidunt condimentum mi scelerisque finibus vehicula. Consectetur id vel risus at vehicula proin facilisis purus vel. Etiam sed sed purus mollis lacinia urna enim neque fringilla. Nibh dui venenatis consectetur etiam etiam blandit dictum facilisis purus. Ac vehicula mi risus viverra ante sit et amet ac.

Here is the Related Target Toggleable shown


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