# Creating accordions

> Accordions are expandable and collapsible sections that make your article content easier to navigate and read. Add them straight from the Zendesk article editor toolbar, and our themes style them to match the rest of your help center.

Source: https://www.zenplates.co/documentation/overview/creating-accordions (Overview › Using the article editor)

Accordions (previously called toggles in our documentation) show a list of section titles that visitors can expand to read more. They help minimize scrolling and, when used properly, let visitors find the content that's relevant to them quickly and easily. They work well for FAQs, troubleshooting steps and optional guidance.

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.

The Zendesk article editor now includes [native accordions](https://support.zendesk.com/hc/en-us/articles/11042696237850-Using-accordions-to-create-expandable-and-collapsible-sections-in-the-article-editor) that you can add and edit straight from the toolbar, and our themes style them to match the rest of your help center. We recommend using them for all new content. The list-based toggles used in earlier versions of our themes are still supported, so existing articles don't need to change. You'll find their instructions in the **Legacy elements** tab.

Native article components are supported in version 4.0.0 or later of our themes. If you're using an earlier version, use the legacy elements instead.

**Article components**

## Adding accordions

1. Create a new article or edit an existing one in your help center or Knowledge admin, and place your cursor where the accordion should appear.

2. Click the **Article components** button in the editor toolbar and select **Accordion**.

3. Enter a title for the first section, followed by the content that visitors will see when they expand it.

4. Click the **Add section** icon (**+**) in the accordion toolbar to add another section. Use the **Move up** and **Move down** icons to reorder sections, and the **Remove** icon to delete one.

5. Click **Save**.

To move an accordion, hover over it and drag the handle. To remove it, click the handle to select the accordion and press **Delete**.

**Example: Native accordion**

```html
<div class="wysiwyg-disclosure">
  <details>
    <summary>How do I reset my password?</summary>
    <div class="wysiwyg-disclosure-content">
      <p>Click <strong>Forgot password</strong> on the sign-in page and follow the link in the email we send you.</p>
    </div>
  </details>
  <details>
    <summary>Can I change my email address?</summary>
    <div class="wysiwyg-disclosure-content">
      <p>Yes. Open your profile, click <strong>Edit</strong> and enter your new email address.</p>
    </div>
  </details>
  <details>
    <summary>How do I close my account?</summary>
    <div class="wysiwyg-disclosure-content">
      <p>Contact our support team and we'll close your account for you.</p>
    </div>
  </details>
</div>
```

The editor creates this markup for you. Each section is a standard `<details>` element, so accordions work even if scripts are unavailable.

### Opening sections by default

Sections start collapsed unless they're saved with the `open` attribute. To open a particular section when the page loads, add a `data-initial` attribute with the section's position (starting from `0`) to the accordion using the editor's **HTML** (source code) view:

```html
<div class="wysiwyg-disclosure" data-initial="0">
  ...
</div>
```

### Keeping one section open at a time

By default, visitors can expand as many sections as they like. Add `data-accordion="true"` to the accordion using the HTML view to make sure only one section is open at a time. If one is already open, expanding another will cause it to close:

```html
<div class="wysiwyg-disclosure" data-accordion="true">
  ...
</div>
```

To apply these options to every accordion in your help center, set them in a script in your Document head template (`document_head.hbs`) instead:

```html
<script>
  window.Theme = window.Theme || {};
  window.Theme.disclosures = { accordion: true };
</script>
```

### Linking to a section

Our themes give each section an `id` based on its title. For example, a section titled "How do I reset my password?" can be linked to with `#how-do-i-reset-my-password`. Following the link opens that section and scrolls to it. A link to the `id` of any element inside a section, such as a heading, works the same way.

## Styling accordions

The brand color, text color, border color and margin can be changed in the **Accordions** section of the visual builder's [Formatting elements](https://www.zenplates.co/documentation/visual-builder/editing-formatting-elements) panel.

You can also write your own custom CSS, for example:

```css
/* Change the color of a section title to red */
.content .wysiwyg-disclosure summary {
  color: red;
}

/* Change the color of text in an expanded section to blue */
.content .wysiwyg-disclosure-content {
  color: blue;
}
```

**Legacy elements**

## Adding legacy toggles to article content

The first step is to create a [numbered or bulleted list](https://support.zendesk.com/hc/en-us/articles/4408839186586-Help-center-editor-toolbar-reference) 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 [HTML](https://support.zendesk.com/hc/en-us/articles/4408839186586-Help-center-editor-toolbar-reference) (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 `title` attribute to each list item. For example:

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

Where:

- &#x20;The `.js-toggles` class name specifies that we'd like to convert this list into dynamic toggles.
- &#x20;The `title` attribute specifies the title for each toggle.
- &#x20;The content of each list item is converted into its own collapsible toggle section.

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.

### Enabling accordion functionality

Enabling the `accordion` option in the toggles script 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:

**Example: Toggles behaving as an accordion**

```html
<ul class="js-toggles" data-accordion="true">
  <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 connect devices to an external display and use a desktop interface with mouse and keyboard input support.</p>
  </li>
</ul>
```

In version 4.0.0 of our themes `.js-accordions` is the preferred class name, although `.js-toggles` and `data-element="toggles"` continue to work. You can also give a section its title with a `data-title` attribute or a heading with the `.accordion-heading` class instead of the `title` attribute. Legacy toggles are rendered using the same markup as native accordions, so both look identical in your help center.

## Styling toggles

Because legacy toggles are rendered using the same markup as native accordions, they pick up the same styles, including those set in the visual builder. The custom CSS examples in the **Article components** tab apply to both.

## Using a custom micro-template

For the more adventurous among you, you can create your own custom [micro-template](https://www.zenplates.co/documentation/customization/using-micro-templates). A custom template replaces the default rendering for **both** native accordions and legacy toggles.

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

**Example: Large, custom toggles with icons**

```html
<div class="border border-radius bg-white" id="accordion">
  
    <div class="px-5 border-bottom" x-data="toggle({ isOpen: false })">
      <h3 class="flex align-items-center justify-content-between my-5 cursor-pointer transition-fast hover:text-primary" data-toggle="collapse" data-active-class="text-primary" aria-expanded="false" data-target="#toggle-1">
        
          <svg class="fill-current mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px">
            <path d="M 7.5 1 C 7.372 1 7.2439844 1.0489844 7.1464844 1.1464844 C 6.9514844 1.3414844 6.9514844 1.6585156 7.1464844 1.8535156 L 8.4570312 3.1640625 C 6.9691108 4.2559188 6 6.0127547 6 8 L 18 8 C 18 6.0127547 17.030889 4.2559188 15.542969 3.1640625 L 16.853516 1.8535156 C 17.048516 1.6575156 17.048516 1.3424844 16.853516 1.1464844 C 16.658516 0.95148437 16.341484 0.95148438 16.146484 1.1464844 L 14.664062 2.6289062 C 13.860616 2.2295595 12.95819 2 12 2 C 11.04181 2 10.139384 2.2295595 9.3359375 2.6289062 L 7.8535156 1.1464844 C 7.7560156 1.0489844 7.628 1 7.5 1 z M 9 5 L 10 5 L 10 6 L 9 6 L 9 5 z M 14 5 L 15 5 L 15 6 L 14 6 L 14 5 z M 4 9 C 3.448 9 3 9.448 3 10 L 3 16 C 3 16.552 3.448 17 4 17 C 4.552 17 5 16.552 5 16 L 5 10 C 5 9.448 4.552 9 4 9 z M 6 9 L 6 17 C 6 17.552 6.448 18 7 18 L 8 18 L 8 21.5 C 8 22.328 8.672 23 9.5 23 C 10.328 23 11 22.328 11 21.5 L 11 18 L 13 18 L 13 21.5 C 13 22.328 13.672 23 14.5 23 C 15.328 23 16 22.328 16 21.5 L 16 18 L 17 18 C 17.552 18 18 17.552 18 17 L 18 9 L 6 9 z M 20 9 C 19.448 9 19 9.448 19 10 L 19 16 C 19 16.552 19.448 17 20 17 C 20.552 17 21 16.552 21 16 L 21 10 C 21 9.448 20.552 9 20 9 z"/>
          </svg>
        
        
              
        <span class="mr-auto">
          Android
        </span>
        <svg class="fill-current pointer-events-none ml-3" x-bind:class="isOpen && 'rotate-180'" width="14px" viewBox="0 0 40 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M20,19.5 C19.4,19.5 18.9,19.3 18.4,18.9 L1.4,4.9 C0.3,4 0.2,2.4 1.1,1.4 C2,0.3 3.6,0.2 4.6,1.1 L20,13.8 L35.5,1.1 C36.6,0.2 38.1,0.4 39,1.4 C39.9,2.5 39.7,4 38.7,4.9 L21.7,18.9 C21.1,19.3 20.5,19.5 20,19.5 Z" fill-rule="nonzero"></path>
        </svg>
      </h3>
      <div class="collapse" id="toggle-1">
        <div class="pb-4">
          <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>
        </div>
      </div>
    </div>  
  
    <div class="px-5 border-bottom" x-data="toggle({ isOpen: false })">
      <h3 class="flex align-items-center justify-content-between my-5 cursor-pointer transition-fast hover:text-primary" data-toggle="collapse" data-active-class="text-primary" aria-expanded="false" data-target="#toggle-2">
        
        
          <svg class="fill-current mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px">
            <path d="M 7.5332031 2.9765625 C 5.0249242 2.9765625 2.9765625 5.0249242 2.9765625 7.5332031 L 2.9765625 16.421875 C 2.9765625 18.930154 5.0249242 20.978516 7.5332031 20.978516 L 16.421875 20.978516 C 18.930154 20.978516 20.978516 18.930154 20.978516 16.421875 L 20.978516 7.5332031 C 20.978516 5.0249242 18.930154 2.9765625 16.421875 2.9765625 L 7.5332031 2.9765625 z M 7.5332031 4.9765625 L 16.421875 4.9765625 C 17.861596 4.9765625 18.978516 6.0934821 18.978516 7.5332031 L 18.978516 16.421875 C 18.978516 17.861596 17.861596 18.978516 16.421875 18.978516 L 7.5332031 18.978516 C 6.0934821 18.978516 4.9765625 17.861596 4.9765625 16.421875 L 4.9765625 7.5332031 C 4.9765625 6.0934821 6.0934821 4.9765625 7.5332031 4.9765625 z M 6.5 9 A 0.5 0.5 0 0 0 6 9.5 A 0.5 0.5 0 0 0 6.5 10 A 0.5 0.5 0 0 0 7 9.5 A 0.5 0.5 0 0 0 6.5 9 z M 10.5 9 C 8.961 9 8 10.152 8 12 C 8 13.844 8.943 15 10.5 15 C 12.053 15 13 13.84 13 12 C 13 10.156 12.046 9 10.5 9 z M 16 9 C 15.442109 9 14.930338 9.180727 14.564453 9.5292969 C 14.198568 9.8778668 14 10.382639 14 10.927734 C 14 11.458086 14.353792 11.887411 14.726562 12.091797 C 15.099334 12.296183 15.501273 12.382761 15.869141 12.482422 C 16.254472 12.586815 16.604109 12.681691 16.792969 12.785156 C 16.981829 12.888622 17 12.891871 17 13.072266 C 17 13.388803 16.9031 13.598546 16.746094 13.748047 C 16.589087 13.897548 16.350292 14 16 14 C 15.676119 14 15.434132 13.906951 15.273438 13.757812 C 15.112742 13.608676 15 13.390833 15 13 L 14 13 C 14 13.609167 14.215695 14.141325 14.59375 14.492188 C 14.971805 14.843049 15.478881 15 16 15 C 16.557708 15 17.069553 14.821155 17.435547 14.472656 C 17.801541 14.124157 18 13.617728 18 13.072266 C 18 12.54166 17.646328 12.112488 17.273438 11.908203 C 16.900547 11.703918 16.498528 11.617185 16.130859 11.517578 C 15.745727 11.413239 15.396009 11.318458 15.207031 11.214844 C 15.018053 11.11123 15 11.107382 15 10.927734 C 15 10.61183 15.096791 10.401633 15.253906 10.251953 C 15.411022 10.102273 15.649891 10 16 10 C 16.323881 10 16.565867 10.093049 16.726562 10.242188 C 16.887258 10.391324 17 10.609167 17 11 L 18 11 C 18 10.390833 17.784305 9.8586753 17.40625 9.5078125 C 17.028195 9.1569497 16.521119 9 16 9 z M 10.5 10 C 11.805 10 12 11.253 12 12 C 12 12.747 11.805 14 10.5 14 C 9.26 14 9 12.912 9 12 C 9 11.253 9.195 10 10.5 10 z M 6 11 L 6 15 L 7 15 L 7 11 L 6 11 z"/>
        </svg>
        
              
        <span class="mr-auto">
          iOS
        </span>
        <svg class="fill-current pointer-events-none ml-3" x-bind:class="isOpen && 'rotate-180'" width="14px" viewBox="0 0 40 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M20,19.5 C19.4,19.5 18.9,19.3 18.4,18.9 L1.4,4.9 C0.3,4 0.2,2.4 1.1,1.4 C2,0.3 3.6,0.2 4.6,1.1 L20,13.8 L35.5,1.1 C36.6,0.2 38.1,0.4 39,1.4 C39.9,2.5 39.7,4 38.7,4.9 L21.7,18.9 C21.1,19.3 20.5,19.5 20,19.5 Z" fill-rule="nonzero"></path>
        </svg>
      </h3>
      <div class="collapse" id="toggle-2">
        <div class="pb-4">
          <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>
        </div>
      </div>
    </div>  
  
    <div class="px-5" x-data="toggle({ isOpen: false })">
      <h3 class="flex align-items-center justify-content-between my-5 cursor-pointer transition-fast hover:text-primary" data-toggle="collapse" data-active-class="text-primary" aria-expanded="false" data-target="#toggle-3">
        
        
        
          <svg class="fill-current mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px">
            <path d="M 19.09375 2.0019531 C 18.948812 1.9952031 18.8025 2.0040469 18.65625 2.0292969 L 12 3.1894531 L 12 11 L 21 11 L 21 4 C 21 3.408 20.740109 2.84975 20.287109 2.46875 C 19.947359 2.183 19.528562 2.0222031 19.09375 2.0019531 z M 10 3.5371094 L 4.65625 4.46875 C 3.69725 4.63675 3 5.4654531 3 6.4394531 L 3 11 L 10 11 L 10 3.5371094 z M 3 13 L 3 17.560547 C 3 18.534547 3.69725 19.36325 4.65625 19.53125 L 10 20.462891 L 10 13 L 3 13 z M 12 13 L 12 20.810547 L 18.65625 21.970703 C 18.77125 21.990703 18.886953 22 19.001953 22 C 19.468953 22 19.923109 21.835297 20.287109 21.529297 C 20.740109 21.148297 21 20.591 21 20 L 21 13 L 12 13 z"/>
        </svg>
              
        <span class="mr-auto">
          Windows
        </span>
        <svg class="fill-current pointer-events-none ml-3" x-bind:class="isOpen && 'rotate-180'" width="14px" viewBox="0 0 40 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M20,19.5 C19.4,19.5 18.9,19.3 18.4,18.9 L1.4,4.9 C0.3,4 0.2,2.4 1.1,1.4 C2,0.3 3.6,0.2 4.6,1.1 L20,13.8 L35.5,1.1 C36.6,0.2 38.1,0.4 39,1.4 C39.9,2.5 39.7,4 38.7,4.9 L21.7,18.9 C21.1,19.3 20.5,19.5 20,19.5 Z" fill-rule="nonzero"></path>
        </svg>
      </h3>
      <div class="collapse" id="toggle-3">
        <div class="pb-4">
          <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 connect devices to an external display and use a desktop interface with mouse and keyboard input support.</p>
        </div>
      </div>
    </div>  
  
</div>
```

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

Version 4.0.0 of our themes includes a ready-made accordions template, commented out, in the Document head template (`document_head.hbs`). Remove the comment tags around the `tmpl-accordions` template to use it as a starting point. The accordions script looks for a micro-template with an id of `accordions` (or `toggles`, for compatibility with earlier versions) by default, so adding one to the Document head, Article page (`article_page.hbs`) or Footer (`footer.hbs`) template will ensure that it's used for all accordions within your article content.

```html
<script type="text/template" id="tmpl-accordions">
  ...
</script>
```

The template receives the accordion's `id`, the index of the `initial` section, the `accordion` and `activeClass` options and a list of `children`. Each child has an `id`, a `title`, the section's content as `innerHTML` and, for native accordions, whether it was saved `open`.