Help Center – Status Tabbed-navigation

2 Comments

  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey Alex Megalos

    Use the code to get the functionality like slack on category page;

    i). Add code to your script.js file.

    $(document).ready(function () {
    $.getJSON('/api/v2/help_center/categories.json' , function(data) {
      var _x = "";
      $.each(data.categories , function(idx , itm){
         _x += '<li class="category-list-items">';
       _x += '<a href = "'+itm.html_url+'" class="category-list-link"  id="'+itm.id+'">' + itm.name + '</a>';
         _x += '</li>'; 
      });
     $(".category-tab-block").html(_x);
     var categoryLengthCheck = $(".category-tab-block > li").length;
     if(categoryLengthCheck){
       $(".category-tab-block > li").show();
       $('.category-list-link').each(function(index, value){
          var categoryId = $(this).attr("id");
          getSectionsOfCategories(categoryId);
       })
      }
    }) ;
    function getSectionsOfCategories(categoriesID) {
     $.getJSON('/api/v2/help_center/categories/' + categoriesID + '/sections.json' , function(data) {
       var _y = "";
       $.each(data.sections , function(idx , itm){
       _y += '<li class="sections-list-item">';
       _y += '<a href = "'+itm.html_url+'"  class="sections-list-link" id="'+itm.id+'">' + itm.name + '</a>';
       _y += '</li>'; 
       });
      $("#" + categoriesID).parent().append('<ul class="sections-list-of-tab">' + _y + "</ul>");
       var seclength = $(".sections-list-of-tab > li").length;
       if(seclength){
         $(".sections-list-of-tab > li").show();
       }
      });
     }
    });


    Screenshot:-

     

     

    ii). Add html element to your category_page.hbs file.

    <section class="category-tab-block"></section>

    Screenshot:-

     

    iii). Add code to your style.css file.

    .sections-list-of-tab {
      display:none;
      border: 2px solid #ddd;
      background-color:#f7f7f7;
      padding:10px;

    }

    .sections-list-of-tab li {
      padding:5px 0;
    }


    .category-list-items:hover .sections-list-of-tab {
      display:block;
    }

    .category-list-items {
      margin: 10px 0;
    }

    .category-list-items span {
      cursor: pointer;
    }


    Screenshot:-

     

     

    iv). Make sure document_head.hbs file has jquery CDN.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
      integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
      crossorigin="anonymous"></script>



    Screenshot:-

     

     

    v). Use CSS to make this as a Tab.

    vii). When your have done with this, you will see categories as a tab and when you do mouse hover over any category, all the clickable sections of that category would be shown in a list.

     

    Output:-

     

    Thanks

    Team

     

    1
  • Oliver Mottram

    Hi Ifra Saqlain this worked well, thank you! When I added this code, the categories are shown in a vertical list down the page, is there anyway to have them going across the page in a row, like slack have please?

    0

Please sign in to leave a comment.

Powered by Zendesk