Description
A collapsible is an element where content is can be shown or visible by clicking on a triggering element.
Documentation
A collapsible is an element inside which content can be shown or hidden by clicking on a triggering element. One way to use this is to implement a very minimal accordion.
About us
Sed ut perspiciatis unde omnis iste natus error sit...
Neque porro quisquam est, qui dolorem ipsum quia...
In the above example clicking on the About us header will hide or show the remainder of the section content. Another possible use case is to create a simple contextual menu.
Collapsibles default to being open. You can change this by adding a
closed class to the collapsible.
Custom triggers
The standard behaviour is to use the first element as the trigger to open or
close a collapsible. You can also use the trigger option to specify a
different element.
You can also specify triggers specifically for closing or opening a collapsible.
The options for doing so are open-trigger and close-trigger.
Markup structure
The markup structure for a collapsible is very simple: the first child
of an element with the pat-collapsible class will be used as the
triggering element (unless otherwise configured) and will always be visible.
All further children will be part of the content that collapses.
The containing element will get a open or closed class which indicates if
the collapsible is currently open (content is visible) or closed (content is
not visible). Likewise the triggering element will get a collapsible-open or
collapsible-closed class. the content of the collapsible is wrapped in a new
div element with class panel-content.
Post-processing our first example will look like this after the collapsible pattern has initialised:
About us
Sed ut perspiciatis unde omnis iste natus error sit...
Neque porro quisquam est, qui dolorem ipsum quia...
AJAX loading of content
Occasionally you may want to display content in a collapsible that
should be loaded on demand. This is supported through the load-content
option. Using this option you can provide a URL for content that should
be loaded and shown in a collapsible when it is opened.
System status
This example will load the system status from /status.html, extract
the element with the id summary and use that as the panel content.
When the collapsible is closed and reopened the content is reloaded.
Remembering the state
Sometimes you need to remember the toggle state of an collapsible. This
can be done by telling the collapsible pattern to store the state of an
element using the store parameter.
About us
...To use this you requirements must be met:
- the element must have an
id - The browser must support Web Storage
The possible values for the store parameter are:
none: do not remember the toggle state (default).local: remember the state as part of the local storage.session: remember the status as part of the session storage.
Transitions
You can specify the transition effect to use when a collapsible
is opened or closed. The default behaviour is to not use a slide transition.
If you prefer to control the effect completely with CSS you can use the css
transition.
System status
...This allow full control in CSS, including the use of animation for
browsers supporting CSS animation. Two non-CSS based animation options
are also included: fade will fade the element in and out, and slide
uses a vertical sliding effect. During a transition an in-progress
class will be set on the element.
Option reference
The collapsible can be configured through a data-pat-collapsible
attribute. The available options are:
| Field | Default | Description |
|---|---|---|
load-content |
A URL (possibly including a fragment id) for content which must be loaded and used as content for the collapsible. | |
trigger |
::first |
Selector used to identify the open/close trigger for the collapsible. |
close-trigger |
Selector used to identify a trigger for closing the collapsible. | |
open-trigger |
Selector used to identify a trigger for opening the collapsible. | |
store |
none |
How to remember the state of a collapsible. Must be one of none, session or local. |
transition |
slide |
Transition effect when opening or closing a collapsinble. Must be one of none, css, fade, slide or slide-horizontal. |
effect-duration |
fast |
Duration of transition. This is ignored if the transition is none or css. |
effect-easing |
swing |
Easing to use for the open/close animation. This must be a known jQuery easing method. jQuery includes swing and linear, but more can be included via jQuery UI. |
scroll-selector |
CSS selector or self. Defines which element will be scrolled into view. self if it is the collapsible element itself. |
|
scroll-offset |
offset in pixels to stop scrolling before the target position defines by scroll-selector. Can also be a negative number. |