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 Panel

Related Components

  • ESL Panel Group
  • ESL Toggleable
  • ESL Trigger

Related Examples

  • Accordion
  • Tabs
  • Menu

ESLPanel is a custom element that is used as a wrapper for content that can be shown or hidden. Can use collapsing/expanding animation (smooth height change). Can be used in conjunction with ESLPanelGroup to control a group of ESLPopups

ESLPanel.register();

ESLPanel Attributes | Properties:

  • active-class - class(es) to be added for active state ('open' by default)
  • animate-class - class(es) to be added during animation ('animate' by default)
  • post-animate-class - class(es) to be added during animation after next render ('post-animate' by default)
  • initial-params - initial params for current ESLPanel instance
  • animating - a marker of animation process running

ESLPanel extends ESLToggleable you can find other supported options in its documentation.

Events

  • esl:before:show - thrown when panel is going to change its state to expanded
  • esl:before:hide - thrown when panel is going to change its state to collapsed
  • esl:show - thrown when panel change its state to expanded
  • esl:hide - thrown when panel change its state to collapsed
  • esl:after:show - thrown when panel changed its state to expanded
  • esl:after:hide - thrown when panel changed its state to collapsed

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