The ui-collapsible element creates a collapsible content section with an associated heading.
It can be in either of two states: expanded - meaning its content section is expanded and visible -
or collapsed - meaning its content section is collapsed and not visible.
The ui-collapsible element exposes the following properties:
expanded: allows to set the initial state of the ui-collapsible element and to query
the state at any given time
animated: allows to turn on/off animations for the ui-collapsible element
The ui-collapsible element dispatches the following events:
ui-open-changed: dispatched when the collapisble changes state from expanded to
collapsed or vice versaOpenChangeEvent (the same event dispatched from overlay behaviors)
and has the following event.detail: { open: boolean; target: CollapsibleElement; }The ui-collapsible element exposes the following methods:
toggle(expanded?: boolean): toggles the collapsiblePromise<void> which resolves when the animation is finished
<ui-collapsible> <h3 data-part="header"> <button class="ghost" data-part="trigger">Lorem ipsum</button> </h3> <p data-part="region"> Lorem, ipsum dolor sit amet consectetur adipisicing elit... </p> </ui-collapsible>
A ui-collapsible must always contain:
data-part="trigger" and
data-part="region"
A trigger element can be a button, but this is not required. Be aware though, that the
ui-collapsible element will add a role="button" and tabindex="0"
attribute to the trigger element to ensure its accessibility.
Using a header element as the trigger element will disable the intrinsic header role of the h[n]
element and is therefore not recommended. As seen in the example above, to include a header and preserve its
accessible role, the trigger element should be a child of the actual header element. The header element can in
this case be annotated with the attribute data-part="header" which will only add a few additional
styles and is optional.
A region element can be any block level element that contains the content of the collapsible section.
If the content is a single paragraph, the paragraph can be marked as the region element directly. If the
content contains multiple paragraphs or any mix of elements, wrap the content in a div and
annotate it with the data-part="region" attribute.
A collapsible section with an h3 header containing a button. The region is a simple paragraph.
The content of the button is customizable by the user and can include icons or other forms of visual state
representation.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus dignissimos voluptates suscipit eaque inventore id sint accusamus pariatur architecto, dolor voluptatem repudiandae dicta quaerat aut porro omnis soluta nostrum molestiae.
A collapsible section with an h3 header containing the header text and a separate button element
which contains two icons to visualize the ui-collapsible's state. The collapsible section is set
to be expanded by default.
The button has an accessible label and the icon animations are defined in the demo's main.css.
The region element is a div containing 2 paragraphs. The wrapper is necessary as the collapsible
region needs a single region root element (for manipulating visibility, calculating the region's height, as
well as animating the transitions between expanded and collapsed state).
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus dignissimos voluptates suscipit eaque inventore id sint accusamus pariatur architecto, dolor voluptatem repudiandae dicta quaerat aut porro omnis soluta nostrum molestiae.
Nesciunt excepturi ad asperiores sed! Ipsum fugiat totam quae assumenda error eligendi exercitationem, suscipit cum nulla inventore consequatur reprehenderit, repellat minus laboriosam autem corrupti harum ex quia laborum similique dignissimos.