How to add tabs to your Help Center home page

Posted Mar 08, 2016

I implemented tabs using jQuery-UI tabs plugin, which makes it quite simple to embed in Zendesk Help Center home-page.

First, download jquery-ui from their website, with your favorite design, and add jquery-ui.css as an asset to your theme.

In the Document Head section add the following:

In the Home section, add the following:

{{#each categories}}
{{#is name "Product Updates"}}
<h2>{{name}}</h2>
<div id="product_updates_tabs">
<ul>
{{#each sections}}
<li><a href="#{{id}}">{{name}}</a></li>
{{/each}}
</ul>
{{#each sections}}
<div id="{{id}}">
<ul>
{{#each articles}}
<a href="{{url}}"><li>{{title}}</li></a>
{{/each}}
</ul>
</div>
{{/each}}
</div>
{{/is}}
{{/each}}

============

You can of course customize the design by editing the jquery-ui.css.

The above is based on the example in the jquery-ui tabs example page:
https://jqueryui.com/tabs/

In my example, the category "Product Updates" has two sections - "Left Tab" and "Right Tab" and each have 3 articles in it.

You can add more sections which will added as tabs automatically.

Let me know if you have any questions.

5 comments

Date

Newest

Nicole Saunders

Oct 30, 2017

Hey Lazar -

I believe it should look like the screenshot on the top right in the original post.

Also, I see that this is your first post - Welcome to the Zendesk Community! I encourage you to head over to the Welcome Thread in The Lounge to introduce yourself.

We look forward to seeing you around the Community. Happy Zendesking!

lazar.albert.marius

Oct 29, 2017

Hi, how should the tabs for categories be looking like on the home page? Thanks in advance for help.

Christopher Stock

Mar 23, 2016

Hi Samantha,

If I've understood the code correctly, it'll only work in it's current form for categories called 'Product Updates'.

Try making the changes below.

In the Document Head:

<script>
  $(function() {
    $( "#agents_only_tabs" ).tabs();
  });
</script>

In the Home Section:

{{#each categories}}
  {{#is name "Agents only"}} 
    <h2>{{name}}</h2>
    <div id="agents_only_tabs">
      <ul>
        {{#each sections}}
          <li><a href="#{{id}}">{{name}}</a></li>
        {{/each}}
      </ul>
      {{#each sections}}
        <div id="{{id}}">
          <ul>
            {{#each articles}}
              <a href="{{url}}"><li>{{title}}</li></a>
            {{/each}}
         </ul>
       </div>
     {{/each}}
   </div>
  {{/is}}
{{/each}}