Sections

Tabs

Make it easier for visitors to find what they’re looking for by grouping content.

In this article

Although they are most often seen within the content area of an article, tabs are also used as part of larger patterns throughout our theme collection. The Tabs plugin is responsible for generating the HTML markup for a tabs element, based on an existing list.

Example

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

  • <ul data-element="tabs" data-active-class="text-primary">
      <li data-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 data-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 data-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>

An optional fade effect can be added by using .fade on each tab. If the fade effect is applied the active tab must also have .is-shown in order to be visible. Our guide on how to add tabs to your article content includes the steps involved in customizing the appearance of your tabs.

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="tabs" attribute to the list element.
  4. Add optional titles to each list item using the data-title attribute:

     <ul data-element="tabs">
       <li data-title="The first tab">...</li>
       <li data-title="The second tab">...</li>
       <li data-title="The third tab">...</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 Tabs plugin can be instantiated against a list using JavaScript:

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

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

The Tab plugin, which can be used independently of this plugin, is responsible for showing and hiding tabs. Because the Tabs plugin is simply responsible for generating the required HTML based on preexisting content, you simply add your own HTML markup to any page.

Both the Tab and Tabs plugin JavaScript code is included within the 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. For example, data-template="my-tabs" instructs the plugin to use the custom my-tabs template for rendering markup.

Name Type Default Description
initial number 0 The index of the tab that should be shown on initialization.
activeClass text '' The class name(s) to apply to the active tab link.
template string
null
null The name of the template to use.
templateData object {} Additional data to provide to the template rendering function.

Events

Name Description
tabs.render Fires when the tabs markup has been rendered and inserted into the DOM.

Because the original list is replaced with the HTML from the template, the event contains a reference to the new element:

document.addEventListener('tabs.render', function(e) {
  
  // The newly rendered tabs element
  var tabs = e.detail.relatedTarget;
});

To respond to tabs being shown or hidden, use the events emitted by the Tab plugin.