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

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

Dictum venenatis mauris etiam augue curabitur arcu ante justo urna. Vulputate elit diam condimentum neque congue rhoncus ac placerat dui. Tincidunt lorem vel porta diam blandit lorem dolor diam curabitur. Finibus diam arcu pretium venenatis fringilla risus ac diam facilisis. Eu id lacinia eget nunc finibus vel justo placerat justo. Vulputate urna et purus diam amet purus vehicula aenean congue. Fringilla at curabitur consectetur vulputate suscipit laoreet ut finibus etiam. Purus proin dictum ut blandit eget facilisis finibus lacinia augue. Dolor mollis et aenean nulla eu neque curabitur condimentum pretium. Suscipit dictum urna arcu justo adipiscing facilisis congue condimentum pretium.

Here is the Related Target Toggleable shown


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