How to add tabs to your Help Center home page | Community
Skip to main content

How to add tabs to your Help Center home page

  • March 8, 2016
  • 5 replies
  • 0 views
T

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.

    5 replies

    S

    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.

    J
    • Jessie17
    • March 8, 2016

    Thanks for sharing this, Tal!

    Christopher15

    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.

     

    lazar.albert.marius

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

    Nicole17
    • Nicole17
    • October 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!

    Terms & ConditionsCookie settingsAccessibility statement