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
20bc339bd2723cd9b45490182850330f51ca05ce126df25471a157e1c89c6993309f90467a07ce465fdb4f1f6e9cf6f986c3d6a945e43891acdf16a57872d1668b8894e5d388f0400f54f9c8f1eed22da74f834a470b07806789c3311fa94082615aadd570b8a9b0a359977fb1a17ad28c84cfe220267e2deecb5ea66346cd360c1044c63d951069219666c06ae85e993e7d058079ab76395afdf31ca164445d4cc919a5ccd3195ce2098858980f322f53f6709e46ac57d31458de9cd79c59c5740effa426b4d0d3887b288a4adfe355029084a3540cd74ac6e09b233fa1427d5bce771e8dd3643ccdb0e1e1596efe0e2d829217b090a8c5a055b34b7059287a8b4983d3f7c638ab5ce070be6a524efc25ecc4dcb77fdeb8edd98ab90f1be2b2b7e875864ac2aeb2bca9ea0cfd7167947681a2f9194bcd0afda6ca07ef42521ade7c154d01588fc7b281229e0c43b057a46273e33dda292855ea438c18fc40af55d1a5f74ce58126cb30af6ab8218dcb1d8d23fc60a8239775fb158d03c618be3f24352c7d7de7c8a02857d578f1d304dae6eb9353e543d9a091df7cdd0b5967e2b9281f5344b2574fb26ab16121d5e8c1e8ddb650da60d1ab963b3705c7ec6503e54e9f99511bed8953ed58b3b1bd85483420a7f96bcda382377fdeeb0d5151d8616295b3c196b0dca5a03a47ebe8939d85340d8c111171531c5e4cd8e375bd0b20fac6783f77e9671fbc2f8d0e91aa95b3e4c4033b34fd5a9a622b659f1349958da56f0d440f48ba9ef8ccad1fc9ceb27f1bd8ddc44663a068ea0bd8124301968485da00fe7c42422d79322f482e74146bb8f93ebba9afb35daff0f0252df529f37fc2bfa3f71e4ec4b4e011466cc7337499c6ad9d2d54147fac844a0867156961af5140d439c00cd5383b7bc1b3d63a02dcc98eb6f0d9f261231cbe5e5c80bd3cc5dda7ccd896cff4096e201c03daa73a17ca76a4892b699bf18c0478574c99000b8962b6a11a7ccddb94b9f10b078d15397b8451179116b5eee3cc8180aaab2d9f22495fb1924bab35e36cc74034b0d82b70c2b53a28e3b83c9e1db22e39bfc22e1a653525b7213f2388b1a51576b2286cf0a1ef9a370fd2a03257cc66741a473d786ca24ebbc4f3118d313e79336660d4599ae1b17dff7eebaa961b383816b60679b2fc09d266a0392fefb7c0e7b72393e7d5d524eb7b5e69b398929b52800c6a60f3c7888b22ce82673680d14f40d9b37e19a2abc9d27b69bcace5175e9c48aa45c01b6b95231e06c445258694caf125cd46bfe38ba67a4add0c5530e948fbe87432d52148b622f4985bbf0898994bfcbef899e244229c3b04da0c35e4fd7c4098c1c6ca1be8b2ee10daf1ddcc012e407a65830cd5804af32097f0f76ac6fb3a3522e2d408c447bf381e6ee74ab6d1bd1a666686a09774004dd06602619253382531301698c2fd29817c9cf2134c62af99efe77dfa6d7e8bca97fc1fe4f229fdcba04ac9b675f665109cf48db07e48004a12d4eee210e787552b2820eff2b82547443820b212ca0812ecd02a7b4942313ec0fd7e6537dbdb0c60bda464a026a729ece94fc72b4f6dbc29daf8166680c6de3032fa67a8123d9d7f1d57a91f850be72964d1a802cf5dab7623dbd236238ded0fa9011f22fa7656faa839ce86fb8978c794a3f4af0272f23b3a020bcb8576633833126777b7cb3a3592e7487b903d4206a2c2c454a94c8308d4f73b229a24f7d141b09d8506bd84323b24435b8fff0d197398a59c3e3a63db1a909111bf5012dcaa61f28bf8202394db84d106ffe6c685a3d3cf78d71777856de48e89bf99a76d8f4de2ea4a3231d503a06088e4fee0e4bccebc67f3e9aec1b0b9eee198a9778968fa87fdf88e75e7a681d740f20665549e3b44f5145baaddfa348d5642ccbb4b6137510518ba0d8af4f9fca61b68c279300998f224cf4d9932d2fded085096ab8e6afd79624faab5af10a804a08aebcc43e896e0cbce9e9bd36dd4b125759aa3a9e6c73988f75305320d44dadf80b2e59352612ddd37e3dc05e46af8ae54cb925fd3576a5a4e8043bd7ff5e72fa3481a94cfa6b23df81975265fc35f9308889273c3115e748f73cc670f3c42d63020247c63269ede591946d5bb27b2aa4f7a318a97d8b8244e0a4709b4aaded2c7380f5429dcac3f12b3cacc28e80dfa800835bf893b015c756741355419fa5e389e8dd39dea47db81919181c97f2626938c45769df356faa859fd86a249e66bede0b9bc5ce1c27a732f70a01dfab3eb31ddfc20c388d2dbbdc46d377947c3b954511e30414c9019424c611270585c81eb6c1ee14106fd3b2e11b78c0769fadfb3d82316f2a6eaab2d24a10c65456a826b6478b530e92d49804bc07a919cc2228859660e244e7882ddb703b41e6cf0d2b93b2dfa52bcb6499f0585119d2c4d4fdd10e99a45d6bd58e3bebb1a2aa10998029283edee731316e5d56a627df966eb37847f9d2ded13fa82a718f6676c2c332177efb16e06a72c31915646940f75e6d9eaa901e06c85145a90daf2a1ee0e40f7f12b49fe8acb935ee1e41b4be7cc89fb44010458abd30aeba09bcc7835d0e1a9a74e1215fa6a7af3125b9ff6595efc0ac04f755e939e4794bfb0c1a1254ff499fbfd7649529eb2c2c28e365a61bb64b7878b5fff46d913e32bbbf9acc4aae92a171a0ab0b5cd1fa0255b9027f3f7f33a44a5809945aaf050ae9cc1d0c3efc0752b86dec9b37794bb42bbf1801edbd3a0add855184138cb282141e89d162652e4a02e488d7563062ca32774b6dc287df6fd399d3365a61fd5738f629cc627ca36a2defd36774a2a9de929c7f7b4c1731df4edd20b6b25b16832f0a83bc553a1add8b2edbf08297c19c336f9fd6fe6366722908ec42a3f49acc4d06f085a86313e9c159c5705555cad6721195ac4d8e10cbd6447e18e721cd1fa8f8eec057752ffb33677398737ba0341792cb8437421d306f4a16a5a439c55639c2aafa6ab1d7912cfbc2ebead246f6f24053589ec2d5fe1afe61de66030ef93f1e253cedcd9c9de2552d22de71f0dc34e3f4c1029518bc88615731730457783771a81216a09d813dd0507d6b61801c3cb82b860e6af5a04f187526599997ba69611550325f20c9c59efa433faf2020d3dd38876f88616b9b9139267c391bfb203d51151c7c9a61b9cce5bc54091a38e23b6a4b9615b49008847e25ae24f0b70d6128a965d3e181eeec3e7f47dc5bcc2649869cbef300487fdf6eeee5fb34c04c06dc982bfeae90bf82ac5f49f87d02c33f7cf864916e0a70f6ba95beb939fc0116cb4fa4a1d7e9abaa188a8bb44eab9ef2e5b912e6397f1aaf940bb31b4b49fdf1e7ff4e34c9ebaece364596467fe3e2b1b8b40076abc2feb5cfbda8e03f1d4a0636ac18937cc1245ffbdb83d16c90f308f1b7444403d9da36ecdaf0bbce41119ddf328eabb547ab0e42a4438a8134fe393e0ed5a43374758246a0e3f7242d512192cc35ac1e38a0bcf5002f80b90c953d4400ef6cd056cd290a5da33564e3e7a9db756c3cb7a9322acdcab41976af5068a28ef0084c031b62e8763d124eb0a4661dc9537de2061369b892ceab737c3cf815c80d815ce15e03f8bc8a65ec159e4199fe8355c602fa3d19d8f69bb005b3e38bfa497788fcbf47aad3fc6033c58e0ff4ccf4e5fb52476d813e20fabd78620c2eb3806d1be66ed0d57dfa3be07ea85cb3b57bba2af2fe05f3315ca2ac04eba0c66d0a2895fa12f027b58054a4c9505c97c69dfa634d46ad94c0bb149efab589df0d11ed39f5b03c2e6d41394b48afdaad1e9e28839444d09ee51e1f3f91e696a68e848f3cebf10ca3b32458e79e89909435bf3ff3a9f9be74c173d6911d8e8179a57d328f62f6bc0e4d949dbc626c513e31e758f8af78c0202ef0fd24e2e4827180a9cebe21556d46bf965cc0b28fd7f16e4bf4f0ada1d991eb3b5c755d592b07394434e47d3be84a5b3bf6a13d01f2be0f7a13a8a0169b133f82a1195335ce22fe9ccd5e5ce003bd23a56db797c5dc233171af7e27718aaa09b18e1f209075252061f7f2de681c804fe9e3e33a90c805d20374ccce4edc7bf92c34b07d6429d31793b7c465166c2da50ec3d4b7027cc9d264c9036d0d56414f3929e3bb55645865c30480973d86c5ae326cb30e230f3c1a95dac4ac25182f36390c1612178f62c54b4840298f56ac6995dc7c22682399b67f4f3eeb189968b93b4e76275fc4e3ac3a16e95480c316fe9669cac3901b76eab754e5b139e8df9b5c6565d31c00597e3033cbbbae988100cdba915a3c986bdd269ec3bc0e767bd84a75c8c9d505a44d67c5cdb91b8eb4a1e55bbaa60bd6042d2850aaee538a08e16bb6d63b1c7e7a9434d74aac1d197ba8316c001e02258229688f17d9fbba1751f930aa3d55302865f

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.