The Collapse extension, as the name suggests, allows you to create collapsible sections of content anywhere in your help center. Each collapsible section comprises the collapsible content area as well as one or more triggers which, when clicked, show or hide the content.
You can have a single collapsible element controlled by multiple triggers, where a trigger is typically a link or button:
Similarly, multiple collapsible elements can be controlled by a single trigger:
Use the data-parent attribute on one or more collapsible elements to group them on the basis of a common ancestor element. If two or more collapsible elements are grouped, only one can be open at a time.
You can use these elements for almost anything. Examples from our themes include collapsible reponsive navigation menus and interactive toggles and accordions produced by our Toggles extension.
Creating collapsible elements
Use .collapse to create a hidden, collapsible element.
Use .{screen}:expand to expand the .collapse element on specific screen sizes. This is useful when you want an element to behave as a collapsible element on small screen sizes, but be visible on large screen sizes.
The Collapse extension is bundled into all of our themes by default, so you can start using it straight away. The source code can be found within the extensions.(min.)js file in the theme’s Assets folder.
Using attributes
Use the [data-toggle="collapse"] attribute to create a trigger.
The collapsible element targeted by the trigger is identified by a CSS selector specified in the href (in the case of a link) or data-target attribute. You can therefore target collapsible element by ID, class name or a number of other attributes.
The extension will apply the following classes to the collapsible element when visitors click on the associated trigger:
.collapsingduring transitions and is responsible for the transition effect..is-visiblewhen the element is visible.
If data attributes are used within article content you will need to ensure that the allow unsafe HTML setting is enabled within Zendesk Guide.
Options
| Name | Type | Default | Description |
|---|---|---|---|
| parent | stringDOM element | null | If a parent is provided, all collapsible elements under the specified parent will be hidden when this collapsible item is shown. |
| toggle | boolean | true | If true, the collapsible element will be open upon initialization. |
Events
| Name | Description |
|---|---|
collapse:show | Fires when the show() method is called, but before the collapse element is visible. |
collapse:shown | Fires when the collapse element is visible (after CSS transitions have completed). |
collapse:hide | Fires when the hide() method is called, but before the collapse element is hidden. |
collapse:hidden | Fires when the collapse element is hidden (after CSS transitions have completed). |
document.addEventListener('collapse.show', function(e) {
// Do something...
});
