How to add tabs to your Help Center home page
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.
-
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.
-
Thanks for sharing this, Tal!
-
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.
-
Hi, how should the tabs for categories be looking like on the home page? Thanks in advance for help.
-
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!
Please sign in to leave a comment.
5 Comments