Collapse

Create versatile collapsible content areas anywhere in your help center.

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:

Single collapsible element

Similarly, multiple collapsible elements can be controlled by a single trigger:

Multiple collapsible elements

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.

Toggles powered by the Collapse extension
View code
<ul class="js-toggles">
  <li title="Android">
    <p>Android is a mobile operating system based on a modified version of the Linux kernel and other open source software, designed primarily for touchscreen mobile devices such as smartphones and tablets. Android is developed by a consortium of developers known as the Open Handset Alliance and commercially sponsored by Google. It was unveiled in 2007, with the first commercial Android device launched in September 2008.</p>
  </li>
  <li title="iOS">
    <p>iOS is a mobile operating system created and developed by Apple Inc. exclusively for its hardware. It is the operating system that presently powers many of the company's mobile devices, including the iPhone, and iPod Touch; it also powered the iPad prior to the introduction of iPadOS in 2019. It is the second most popular mobile operating system globally after Android. It is the basis for other operating systems made by Apple Inc, like iPadOS, tvOS, and watchOS.</p>
  </li>
  <li title="Windows">
    <p>Windows 10 Mobile is a discontinued mobile operating system developed by Microsoft. First released in 2015, it is a successor to Windows Phone 8.1, but was marketed by Microsoft as being an edition of its PC operating system Windows 10. Windows 10 Mobile aimed to provide greater consistency with its counterpart for PCs, including more extensive synchronization of content, the ability to to connect devices to an external display and use a desktop interface with mouse and keyboard input support.</p>
  </li>
</ul>

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:

  • .collapsing during transitions and is responsible for the transition effect.
  • .is-visible when 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 string
DOM 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...
});

Related extensions

Article navigation Free

Article navigation

Display links to next and previous articles.

Category dropdown Free

Category dropdown

Display all categories within a menu in the page header.

Featured articles Free

Featured articles

Display a list of articles with one or more labels.