Help Center – Status Tabbed-navigation

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

Hi @ifra 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?