Creating toggles

Collapsible toggles and accordions can be used to make your article content easier to navigate and read. They help minimize scrolling and, when used properly, allow visitors to find content that’s relevant to them quickly and easily.

It’s important to consider what the best approach for structuring your article content is. For example, if the page is long but visitors need most or all of the content on the page a navigation element like a Table of Contents or sidebar menu may be more appropriate.

Adding toggles to article content

The first step is to create a numbered or bulleted list in your article where each list item contains the content that will be contained within its own collapsible toggle section. If you have a lot of content to display in each toggle, or content that contains headings and other custom elements, we recommend using the Source Code view within the article editor.

The list itself will be a <ol> or <ul> element, with child list items represented as <li> elements.

Once you’ve added all of your content to the list add a class name of js-toggles to the list and a data-title attribute to each list item. For example:

<ul class="js-toggles">
  <li data-title="The first toggle title">...</li>
  <li data-title="The second toggle title">...</li>
  <li data-title="The third toggle title">...</li>
</ul>

Where:

  • The .js-toggles class name specifies that we’d like to convert this list into dynamic toggles.
  • The data-title attribute specifies the title for each toggle.
  • The content of each list item is converted into its own collapsible toggle section.

The default toggles style as well as an alternative method for specifying toggle titles can be found on the Toggles extension page.

If data attributes are used you will need to ensure that the allow unsafe HTML setting is enabled within Zendesk Guide.

This approach ensures a separation between your content and how it’s displayed to visitors. If you ever decide to switch off toggles for a given list, change themes or export your content you’ll see a simple, uncontaminated list.

The default toggles styles can be seen on the Toggles extension page.

Enabling accordion functionality

Enabling the accordion option in the Toggles extension ensures that only one toggle within a group is open at a time. If one is already open, expanding another will cause it to close.

The easiest way to enable this option is using the data-accordion="true" attribute:

Toggles behaving as an accordion
View code
0161002c2e5efe51de338d9431d56ba63732a549aebdb9d9445ed6504d32c163aa2b814099fcf4d005e28146591d5749ff8b8f92a49547eb7ed0870549b966c1219a5d9a54b9da6e9965633c887b6a31f09649c000f4d99377798d3ef5c7738b17dd8e4d97a6f1999ac4949f9bac326a1a08efebfa167b1d416e25ad901640600927c5ef7a90d63c006f95a923a60d5508b1f05d60cc1c02598e42ac4776827ce0ef73c3d05a283dfa23a61b685c0e1ee0c59656ba64ccf99b1ffcf391cdf16c10ed5cc2283e58beb39fea01ba316d47701ba2b3a1011e2fb6dd32cd8ec34b169e801cccfbce6252b111c54cf2e1b5272336bcf9972bcd9cb568b032d34cc639c9a66d315724ec478a8a7e04a7cfdbb3e45325befaba8d87ca002b8d370dbabe4dc8dd4da42f23e9ec6a9e25b6544855ea5c24adaade03518835b1db862864baa81efb88b2241b2da317e0284b4ffae38bb848d51113af03901e2bef38e27f77858c74bd7a170f4b39a172efc25acc809be8664c8a9d8bc7fe68c94d881eba975b89e445454267c3e596b9809b63d58cd9e04d3a7e824da0b508f2ae72b7eccac208e48f35074e14c921164ff2d2d0beb2aeeafdb3a95500bb68cd31cc039abe4c6d6ba3fa1277d874d0850fc54ac43c64187f2456a8fc66f1b66cb6466f153a7794d84b74a62f23c0caad09c889473af60de4f79536c29fe13b4dcf1c40154d68d9da5cc83990928123a4f90cfa92cab1f69b567ec6fab651dd5ae55c9b5fc9c03500f46023a84adfadc694a72f844c3e033c8f45c327dd1eb4bfbe1b274765cec7f87f002d58b7b58a3c26969742373c9610c034f5e0400631e943261976c7d8762fdb79c6ef25728796f08f56b280a6e27ce31a52321399a554bd9764c7d16ba0a904486ea70ee86cc4965c38f199903115fd65615c25857f135ea0ef6f7aac1de9fb8913ac968642a90b4178a9f110cb984e962d264c383a2d829ffbf3891844299505a8e02283f40ae60b04f5bccaa011da315d2bbdd50e299ee46d8703d0b3e7bf3d2c9d416b0a41d9abf37a48dfc35b567a11beb08c39b40d6db6855fe61193a03b8f3c0588d23da64787e80cc0ef3b8df29b05877fe45696340f2a3e6f31d567a3d329f47520b2141146071cb69b2d48596045a9e24ca8d969f58ffb8a6636e4102d011690a22ff99dcbad5bbf40986e5e19a68a6f678e756c5c86b3b822716d8a7afdea3d725eaa7ace667c4d5e36f092613a09a3c5fd3ad4f79fd7073f867b7a1d36b51317014325e6d1f07067fab46bf8da2f3e3a601ab51f1e80954d01b05779149d38cde78be75b11a026b1c65d3e48c99f59bcd215ccdd0650a55fab8b0255b85e6af83adce4eca992d6f710ccd6f21e0ade7429bd5567151aeb6e60ed03fac77f4c9beff08ec48fbbb86561cdc0bbec688f70d3410b366c6cbda03ebc97015f9ce630286aa68fcb9c1536353584f720515f57908d64b494ef505d7762df5d0967a5a8e0588c1a28fa8d3178c9ee5b96db34e46743ea107e2061135f73fd1e605962ed95916a0d365cc26cd200320613fa7d3bd1768bf346ad0036c1db3cce6136548872221fbf932e8244a685ec34b5f662873c047caae72c5f6b5c5bdd4a6972d77cde238fea01fe7541a93dc8bed194189d0b8b239f453738764739d22cdbc17e1d8fdf3c91926252db8f5ed74653e167dcc09790d77acc6ab854d2ca49a5f749dc4eff22d343753a99f9353cbbb08b5e6dcf2968243c1fefa76b7f87665990f0f2b43b995a5207b6d74723685d3c3aa097187047aff674b611ac63974097b510c61c8e3e8d61fbf6039523eda381c809cf8dba83519822311f02970bf323ac218274fb860d5638d01a032c8cfb7463b9d6bd79fa21343abbc65300fb0f386e170ddc7c86aeaf8b4d3023d35e6f57f6d1e06edb2758e431f1a06770ed9e512b8d7a5422e72651b6ff7b077dd19937cc85c871ab9517356df986d0c7ba6d9fe7e8448a2ba662a8229e4798676cb5a54dffc800fe9c308a72069b3d01044ed4ac056f5729a674408d6e804847382ac7ac0e38147e28e1c5c87f61d65ef31605918ec52c71ce3d80b9eb02dd36021384f05f3acdec6d745e690d6b958b6886aaca15f3a06d87e5fc85b9d2be807cbd4e93a3938ef710807e13d57219a1f673875aac3db8bc0cec3699f3b1d4a80719e45dc58e85dd43ff3d7706215027104f66bb142821093b3fad81ee6c6f3e5a6fab050aba77275eaba72749fe151a908a5fa51d261425d81275c4aa1380d547215a43d570364d6ec1ef58da7ef25fd8bf29e07378f0f487da8f16f1653f63d0e999ce05eeb4dd360f6cbfcf0c956e2182ab2785357b364a80073bdc31f67cbdd632813665c5d847095e8fe047256217f67ee4735548f312b43cf5990bea0b43f3b2c2b1a4837d9ece71f21b69b2ebc4a0e424db255436edd3bf3374d7bc7c8481abd086ee1abc698d52428324d8c80ea3746b3c546b35297dc98adf71665567fbfa193d4de9e542176ba6a0799445f6b06970fe6f68ed2063a7b701187d4623e177a5539bee7adbec03134f0fe9ea22e836b1c56d4df000b1bea963c75a07fa454cb781dea03f831cdbd6e6f678792d120f835f6002e89445c751708381b0b0d9fcc06e3ad576d78236eb6b5d57f306d0ecc212add9fa45b6dc4af6d6fb39d5320bb0d899ffe96033a1679c6be0d46d2480df704af58568542e4336ac1539615f4359fe6e282e4e56b792993cde112ce00ce97ea88a6ef326c44d8c802098961e90d960a73d53176e2fcdfbf508c973f8e7170f35dc20fc7790a4d2c4121fb2b8698bca002ae830149fb4741e1509963be11f3efa957cd0e3e82b3a21caf81d7ae732c900f2c6920a1f5154ebf3379118af879294eee715327020140e82aa34f01197e5d01cc9bce6caf6579fa4f3955402e25b5c57ce87674a4c5a24e9bd9b37cd9946564ec06d16d92b09238ac2cab7fb5585a18206195ccbe32be573e254d3f01db6ac5f7728979f24e3c5b09c8ef7a0b0a44eb660f29d87ee4300f5fea787d498ec9a649dff80239c846da111adbd5ecdb19255457fc325191f8b408f08426e2c717bfa0d915c678a9798fda5b75719618d855ee64411b94f7dd9cafc8ccab41e43e002548436bc1d1997939ea0c4b585955254cd551646fdc3050d19a1ef7013ac1ce5983315b230a2f8bbbcb9bf2f793885caca8a32a3ef843d7078a848e32eaab88b6e17dbc5ca5e92fdb679d139c41e4e8b1fa5a639f78f6378b20f79ab08b2c22f59c1fdaa67292fa9a434641bf33ac70cfd27d2614320f24236fcd166dadd6ce08d1ea1220bbdcd7aea935bd7903b1ffbee59afb12069622e005ae4979d7dcafa05f8a4d2ee613a91e6c6a23b8eb0cec6e6c312c4fd13aaa1d29df3f98666d972a77720cf13ac14d6418918a66bee4d8b41db6b26de90fcda1a37cdac9cf182d67ea63aa4ab25fb4631ae988b3a25d736a36297fcb6f91fdbc9e21e9968a46f5a05f0d4b0718975f42b1c92f49454a7d7ebd3cfee0f87ba279c3fb14b33c9f41a4c9766ee12e71903e976e3826a4a45ddf277c400052ae5696ddf75678e2a5a94fba5ee780108ab06b987ebf838a658a0ef738a6e39104666e5cce4bc4a498d0744c2d77833a4fde86a58d2f61ee0106a21321e56be063b15d456b27eaa24509f7cda903f705e26420717737879a8d85f70b5f76ec2fe162a7c0cb71a10aeb405489ba9abe84491460cb2ab53029112a753084049822e0751943bc145647a4e8582be8b5ae5b46d1fc0d25a70982017a61abd42d1a0efe4bd2f81e93eaca02069d75c09e3c2cdd251a626ccf917791be563695402d76420f2c4c03c950b8da038c3f8b67327291033b4e365bbc8eddacc71fb7e78710d2a99156efba2b41aa11cb2638926b3deb01b3806daa9b0268e76d8f409edb51d3672cb5a996394aff7021edd63b21c97e729ce4b76d761261a8e6bae2891ae2028c9d8ea88f94630d5838db371004a927bf938fba4e37161412978acbb9bc2cef19cab7bea8e3e259dd4fcaa76313e8bda0afa0b858b133ce6faa3371fcacf7bffb1c31bfab656455608732be309a4a5343a7e821bd018f257be668f8d0498b620fe5ca43bf6d549a79250fbecfcb281536c10b52792739a02a59e2435a7c92ba56b951a6c3195165fb16f2b13c2f08356d10002abdae384c5efb2e6f0766dd115a0c7ad4471206b9b71dff6bb3fa06f76f9706b9a5a1873eee1daf478f2d7b6d87828e935ad46bb8f3e51fa7397487bdcecedd4af01e85faecc7e14d4a42575ab7d029033020eefec29ad0d06213dee332246b2a67c18de55cb73004d04eb08b07bad900dce614dc5009f13e36218c5127ff7a61a478f4e3b4bfd6db9d62b082e1a4e36b252a70140e49c209558740ae673331d363dbf85b9dcb9b3ca19e387b98b1947f81cdba4a46b7b6a103152895e84ebc45921976a2da41a1122f0a0616621c77d4256776af51fd4c7a81d52dede4c88fd9d7ca4355959df652abad29eb25e50a9eb2a8e5aff05f7e0b325560df67ecf3058faa70f69ac61c002d6caeb367d2f161c792a68212e582cfc88f7

Styling toggles

If you’d like to give your toggles their own unique look-and-feel there are a couple of options. You can write your own custom CSS, for example:

/* Change the color of a toggle title to red */
.content .toggle-title {
  color: red;
}

/* Change the color of text in a collapsible toggle section to blue */
.content .toggle-title ~ .collapse {
  color: blue;
}

Using a custom micro-template

Or for the more adventurous among you, you can create your own custom micro-template.

A custom template allows to to change not just the appearance of the toggles, but their underlying HTML structure and behavior. Below is an example of a custom toggles template that you could use to change the size and appearance of the toggles:

Large, custom toggles with icons

Additional features like custom icons can be included in a custom micro-template.

The Toggles extension looks for a micro-template with an id of toggles by default, so adding one to Article page template (article_page.hbs) or the globally available Footer template (footer.hbs) will ensure that it’s used for all toggles within your article content.

<ul class="js-toggles">
  <li data-title="The first toggle title">...</li>
  <li data-title="The second toggle title">...</li>
  <li data-title="The third toggle title">...</li>
</ul>

<template id="tmpl-toggles">
  ...
</template>

Questions or feedback about this article? Let us know