• Ifra Saqlain

  • 6 de julho de 2022 08:31
  • Editado

  Community Moderator

  

  

  

  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

   

• Oliver Mottram

  • 10 de janeiro de 2023 14:38

  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?

Por favor, entrar para comentar.