Class Collapsible

Configures the given element as a Collapsible widget.

The Collapsible widget sets up the given element to be collapsed and expanded upon activation. Activation can be done manually by calling open or when clicking on any of the given triggers.

NOTE: The Collapsible widget always wraps each trigger element in another element in order to allow positioning the icon, if any.

IMPORTANT: You should not instantiate more than one Openable widget, regardless of type, on a given element. Use Openable.get to get an existing instance if any. If there is already an Openable widget of any type on this element, it will be destroyed!

You can use the following dynamic attributes or CSS properties in your stylesheet:

The following dynamic attributes are set on the root element that is created by LISN and has a class lisn-collapsible__root:

  • data-lisn-is-open: "true" or "false"
  • data-lisn-reverse: "true" or "false"
  • data-lisn-orientation: "horizontal" or "vertical"

The following dynamic attributes are set on each trigger:

  • data-lisn-opens-on-hover: "true"or"false"`

To use with auto-widgets (HTML API) (see settings.autoWidgets), the following CSS classes or data attributes are recognized:

  • lisn-collapsible class or data-lisn-collapsible attribute set on the element that holds the content of the collapsible
  • lisn-collapsible-trigger class or data-lisn-collapsible-trigger attribute set on elements that should act as the triggers. If using a data attribute, you can configure the trigger via the value with a similar syntax to the configuration of the openable widget. For example:
    • Set the attribute to "hover" in order to have this trigger open the collapsible on hover in addition to click.
    • Set the attribute to "hover|auto-close" in order to have this trigger open the collapsible on hover but and override CollapsibleConfig.autoClose with true.

When using auto-widgets, the elements that will be used as triggers are discovered in the following way:

  1. If the content element has a data-lisn-collapsible-content-id attribute, then it must be a unique (for the current page) ID. In this case, the trigger elements will be any element in the document that has a lisn-collapsible-trigger class or data-lisn-collapsible-trigger attribute and the same data-lisn-collapsible-content-id attribute.
  2. Otherwise, the closest ancestor that has a lisn-collapsible-container class, or if no such ancestor then the immediate parent of the content element, is searched for any elements that have a lisn-collapsible-trigger class or data-lisn-collapsible-trigger attribute and that do not have a data-lisn-collapsible-content-id attribute, and that are not children of the content element.

See below examples for what values you can use set for the data attributes in order to modify the configuration of the automatically created widget.

Example

This defines a simple collapsible with one trigger.

<div>
  <div class="lisn-collapsible-trigger">Expand</div>
  <div class="lisn-collapsible">
    Some long content here...
  </div>
</div>

Example

This defines a collapsible that is partially visible when collapsed, and where the trigger is in a different parent to the content.

<div>
  <div data-lisn-collapsible-content-id="readmore"
       data-lisn-collapsible="peek">
    <p>
      Lorem ipsum odor amet, consectetuer adipiscing elit. Etiam duis
      viverra faucibus facilisis luctus. Nunc tellus turpis facilisi dapibus
      aliquet turpis. Diam potenti egestas dolor auctor nostra vestibulum.
      Tempus auctor quis turpis; pulvinar ante ultrices. Netus morbi
      imperdiet volutpat litora tellus turpis a. Sociosqu interdum sodales
      sapien nulla aptent pellentesque praesent. Senectus magnis
      pellentesque; dis porta justo habitant.
    </p>

    <p>
      Imperdiet placerat habitant tristique turpis habitasse ligula pretium
      vehicula. Mauris molestie lectus leo aliquam condimentum elit fermentum
      tempus nisi. Eget mi vestibulum quisque enim himenaeos. Odio nascetur
      vel congue vivamus eleifend ut nascetur. Ultrices quisque non dictumst
      risus libero varius tincidunt vel. Suscipit netus maecenas imperdiet
      elementum donec maximus suspendisse luctus. Eu velit semper urna sem
      ullamcorper nisl turpis hendrerit. Gravida commodo nisl malesuada nibh
      ultricies scelerisque hendrerit tempus vehicula. Risus eleifend eros
      aliquam turpis elit ridiculus est class.
    </p>
  </div>
</div>

<div>
  <div data-lisn-collapsible-content-id="readmore"
       class="lisn-collapsible-trigger">
    Read more
  </div>
</div>

Example

As above, but with all other possible configuration settings set explicitly.

<div>
  <div data-lisn-collapsible-content-id="readmore"
       data-lisn-collapsible="peek=50px
                              | horizontal=false
                              | reverse=false
                              | auto-close
                              | icon=right
                              | icon-closed=arrow-up"
                              | icon-open=arrow-down">
    <p>
      Lorem ipsum odor amet, consectetuer adipiscing elit. Etiam duis
      viverra faucibus facilisis luctus. Nunc tellus turpis facilisi dapibus
      aliquet turpis. Diam potenti egestas dolor auctor nostra vestibulum.
      Tempus auctor quis turpis; pulvinar ante ultrices. Netus morbi
      imperdiet volutpat litora tellus turpis a. Sociosqu interdum sodales
      sapien nulla aptent pellentesque praesent. Senectus magnis
      pellentesque; dis porta justo habitant.
    </p>

    <p>
      Imperdiet placerat habitant tristique turpis habitasse ligula pretium
      vehicula. Mauris molestie lectus leo aliquam condimentum elit fermentum
      tempus nisi. Eget mi vestibulum quisque enim himenaeos. Odio nascetur
      vel congue vivamus eleifend ut nascetur. Ultrices quisque non dictumst
      risus libero varius tincidunt vel. Suscipit netus maecenas imperdiet
      elementum donec maximus suspendisse luctus. Eu velit semper urna sem
      ullamcorper nisl turpis hendrerit. Gravida commodo nisl malesuada nibh
      ultricies scelerisque hendrerit tempus vehicula. Risus eleifend eros
      aliquam turpis elit ridiculus est class.
    </p>
  </div>
</div>

<div>
  <div data-lisn-collapsible-content-id="readmore"
       class="lisn-collapsible-trigger">
    Read more
  </div>
</div>

Hierarchy (View Summary)

Methods

get register

Constructors

constructor

Properties

close destroy disable enable getContainer getElement getRoot getTriggerConfigs getTriggers isDestroyed isDisabled isOpen onClose onDestroy onDisable onEnable onOpen open toggle toggleEnable

Methods

Staticget

  • get(element: Element): null | Openable

    Retrieve an existing widget by its content element or any of its triggers.

    If the element is already part of a configured Openable widget, the widget instance is returned. Otherwise null.

    Note that trigger elements are not guaranteed to be unique among openable widgets as the same element can be a trigger for multiple such widgets. If the element you pass is a trigger, then the last openable widget that was created for it will be returned.

    Parameters

    • element: Element

    Returns null | Openable

Staticregister

Constructors

constructor

Properties

Readonlyclose

close: () => Promise<void>

Closes the widget.

Readonlydestroy

destroy: () => Promise<void>

Undoes all modifications to the element and returns it to its original state.

You will need to recreate it if you want to enable its functionality again.

Readonlydisable

disable: () => Promise<void>

Disables the functionality of the widget. What this means is specific to each widget.

Readonlyenable

enable: () => Promise<void>

Re-enables the functionality of the widget. What this means is specific to each widget.

ReadonlygetContainer

getContainer: () => null | HTMLElement

Returns the element that was found to be the container. It is the closest ancestor that has a lisn-collapsible-container class, or if no such ancestor then the immediate parent of the content element.

ReadonlygetElement

getElement: () => Element

Returns the element passed to the widget constructor.

ReadonlygetRoot

getRoot: () => HTMLElement

Returns the root element created by us that wraps the original content element passed to the constructor. It is located in the content element's original place.

ReadonlygetTriggerConfigs

getTriggerConfigs: () => Map<Element, OpenableTriggerConfig>

Returns the trigger elements along with their configuration.

ReadonlygetTriggers

getTriggers: () => Element[]

Returns the trigger elements, if any. Note that these may be wrappers around the original triggers passed.

ReadonlyisDestroyed

isDestroyed: () => boolean

Returns true if the widget is destroyed.

ReadonlyisDisabled

isDisabled: () => boolean

Returns true if the widget is currently disabled.

ReadonlyisOpen

isOpen: () => boolean

Returns true if the widget is currently open.

ReadonlyonClose

onClose: (handler: WidgetHandler) => void

The given handler will be called when the widget is closed.

If it returns a promise, it will be awaited upon.

ReadonlyonDestroy

onDestroy: (handler: WidgetHandler) => void

The given handler will be called when the widget is destroyed.

ReadonlyonDisable

onDisable: (handler: WidgetHandler) => void

The given handler will be called when the widget is disabled.

ReadonlyonEnable

onEnable: (handler: WidgetHandler) => void

The given handler will be called when the widget is enabled.

ReadonlyonOpen

onOpen: (handler: WidgetHandler) => void

The given handler will be called when the widget is open.

If it returns a promise, it will be awaited upon.

Readonlyopen

open: () => Promise<void>

Opens the widget unless it is disabled.

Readonlytoggle

toggle: () => Promise<void>

Closes the widget if it is open, or opens it if it is closed (unless it is disabled).

ReadonlytoggleEnable

toggleEnable: () => Promise<void>

Re-enables the widget if disabled, otherwise disables it.

Settings

Member Visibility

On This Page

Methods
Constructors
Properties