How to add tabs to your Help Center home page

5 Comments

  • Samantha Lester
    Comment actions Permalink

    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
  • Jessie Schutz
    Comment actions Permalink

    Thanks for sharing this, Tal!

    0
  • Chris Stock
    Comment actions Permalink

    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
  • lazar.albert.marius
    Comment actions Permalink

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

    0
  • Nicole - Community Manager
    Comment actions Permalink

    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.

Powered by Zendesk