Sections

Toggles

Make content in your articles and throughout your Help Center easier to ready by converting static lists into interactive, toggleable sections.

In this article

The Collapse plugin, which can be used independently of this plugin, is responsible for collapsing and expanding toggle sections.

Examples

Toggles

The following example uses the default template, which can replaced using the plugin’s template setting.

  • <ul data-element="toggles">
      <li data-title="The first toggle title">
        <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.</p>
      </li>
      <li data-title="The second toggle title">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </li>
      <li data-title="The third toggle title">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue justo a metus bibendum dapibus. In imperdiet interdum tincidunt. Nam odio dolor, hendrerit vel eros non, viverra pellentesque tellus. Proin ac elit in leo faucibus gravida. Donec ut neque non augue porttitor mollis a quis eros.</p>
      </li>
    </ul>

Alternatively you can copy-and-paste your custom toggle HTML markup onto any page, eliminating the need to use the Toggles plugin.

The duration of the transition is defined in CSS, which can be modified by applying transition duration utilities the parent element. For example, use .transition-fast to increase the speed of each collapse and expand transition.

Accordion

Toggle groups can be configured to behave as accordions using the accordion setting.

  • <ul class="toggles" data-accordion="true">
      <li data-title="The first toggle title">
        <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.</p>
      </li>
      <li data-title="The second toggle title">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </li>
      <li data-title="The third toggle title">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue justo a metus bibendum dapibus. In imperdiet interdum tincidunt. Nam odio dolor, hendrerit vel eros non, viverra pellentesque tellus. Proin ac elit in leo faucibus gravida. Donec ut neque non augue porttitor mollis a quis eros.</p>
      </li>
    </ul>

Usage

When creating or updating an article:

  1. Create a ordered or unordered list (<ol> and <ul> elements, respectively)
  2. Click the Source Code (Source code icon) button in the editor toolbar to view the source code of the page.
  3. Add the data-element="toggles" attribute to the list element.
  4. Add optional titles to each list item using the data-title attribute:

     <ul data-element="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>
    

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

The Toggles plugin can be instantiated against a list using JavaScript:

<ul class="js-toggles">...</ul>

<script type="text/javascript">
  ready(function() {
    each('.js-toggles', function(el) {
      new Toggles(el, {
        // Options go here
      });
    });
  });
</script>

Both the Toggles and Collapse plugin JavaScript code is included within the theme’s plugins.min.js file by default. If you have edited this file ensure that both are still present.

Options

Options can be passed via data attributes or JavaScript.

For data attributes, append the option name to data- and use kebab case instead of camel case.

Name Type Default Description
initial number -1 The index of the toggle to open on initialization.
accordion boolean false True if the toggle group should behave as an accordion.
template string
null
null The name of the template to use.
templateData object {} Additional data to provide to the template rendering function.

Events

Class Properties
toggles.render Fires when the toggles markup has been rendered and inserted into the DOM.