Recent searches

No recent searches

How to add tabs to your Help Center home page

image avatar

Tal Admon

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:

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="{{asset 'jquery-ui.css'}}">
<script>
  $(function() {
    $( "#product_updates_tabs" ).tabs();
  });
</script>

 

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.

0

5

5 comments

Date
    image avatar

    Samantha Lester

    Thanks for the tip! I tried it on my sandbox and my sections aren't appearing. I'm on the Swiftest Elk theme. 

    Assets: http://www.screencast.com/t/N1WGjLClLe

    Document head: http://www.screencast.com/t/fg6VgWB7

    Home page: http://www.screencast.com/t/il2sx1cwWKH

    Any idea what I did wrong? They don't appear at all when I save.

    0

    image avatar

    Jessie Schutz

    Zendesk Customer Care

    Thanks for sharing this, Tal!

    0

    image avatar

    Christopher Stock

    Zendesk LuminaryCommunity Moderator

    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}}

    This should apply Tal's tabs to your Agents Only category.

     

    0

    image avatar

    lazar.albert.marius

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

    0

    image avatar

    Nicole Saunders

    Zendesk Community Manager

    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!

    0

    Please sign in to leave a comment.

    Didn't find what you're looking for?

    New post