Collapse

Toggle the visibility of content anywhere by using a few classes and the Collapse javascript component.

The collapse component is used to toggle the visibility of content. So, it consists of a toggle and a target element.

Basic Usage #

The collapse component utilizes a few classes. collapse and collapse--show.

Create the toggle element and the target element next to each other. Add the data-collapse-toggle attribute to the toggle element. And don't forget to add the collapse class to the target element. Look at the following example:

Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet. Phasellus erat lacus, tincidunt in laoreet eu, egestas porta massa. Suspendisse potenti. Donec ac urna et lectus tristique commodo a eu sem. Sed ornare vestibulum massa, eu tempus diam fringilla vitae. Vestibulum eget sodales massa, a egestas massa. Quisque magna purus, fermentum ut mauris quis, interdum bibendum magna.

Collapse Target #

There is a situation when the toggle and the target element won't sit next to each other. So, you can specify the selector of the target element as the value of the data-collapse-toggle attribute from the toggle element.

Open by Default #

Just set aria-expanded="true" to the toggle element.

Duis tincidunt massa at ultricies sagittis. Mauris bibendum quis ante et consectetur. Nulla fermentum eleifend dolor, ut congue ipsum consectetur sit amet.

Initializing #

You can use one of these two methods to initialize the Collapse instance.

Via Data Attributes #

The easiest way to initialize the collapse component is by using the data attributes. We already explained how to use this method above. If you haven't checked it out yet, just scroll back to the top.

If you want to change the collapse default options, set them by adding the data-collapse-{key}="{value}" attribute to the collapse element.

Via Javascript #

Initialize the collapse component by calling the Collapse.createInstance(element, options) function.

But, that won't make any toggle element listen to the click events. You should create the toggle elements manually and add a click event listener to them in order to toggle the visibility of collapse elements.

Function	Description
`Collapse.createInstance(element, options)`	Create a Collapse instance.
`Collapse.getInstance(element, options)`	If any, get the Collapse instance.
`Collapse.getOrCreateInstance(element, options)`	Get the Collapse instance if there is one. Create it if necessary.
`Collapse.destroyInstance(element)`	To destroy a Collapse instance. Usually called before removing the element.
`Collapse.dataApi(wrapperElement)`	Execute the Data API within the specified `wrapperElement`.

API #

Parameters #

Most Skewind component constructors accept two parameters, as well as the Dismissible component.

Parameter	Type	Required	Description
`element`	HTMLElement	Required	The target element. You can use any HTMLElement. This element is also used as a key to locate the instance.
`options`	Object	Required	Pass the options object that contains the data below.

Options #

There are a few options available.

Option	Type	Required	Description
`showClass`	String	Required	Classname to be used when the collapse target element is shown.
`group`	String	Optional	Collapse can be grouped by any string, it will become an Accordion.

Methods #

Each instance has these public methods.

Methods	Return	Description
`show()`	void	Show the collapse.
`hide()`	void	Hide the collapse.
`toggle()`	void	Toggle the visibility of the collapse.
`isExpanded()`	boolean	To determine if the current collapse is expanded.
`dispose()`	void	Alternative to `Collapse.destroyInstance`. Just in case if you want to remove collapse element, call this first.

Events #

This event may be emitted for hooking into collapse functionality.

Event	Description
`collapse.show`	This event is triggered when the collapse element is about to appear.
`collapse.shown`	This event is triggered when the collapse element appeared.
`collapse.hide`	This event is triggered when the collapse element is about to disappear.
`collapse.hide`	This event is triggered when the collapse element disappeared.

Messages

Notifications