Hiding a Category

Answered

33 Comments

  • Official comment
    Jennifer Rowe
    Comment actions Permalink

    Jake Bantz wrote a great support tip about how to hide a category on your home page. 

    Refer to Jake's tip instead of this Q&A post for detailed steps.

     

  • McCabe Tonna
    Comment actions Permalink

    Hi Liz,

    Do you mean hide as in its still searchable - or not visible at all to your agents/customers?

    0
  • Liz
    Comment actions Permalink

    Hello!

    Hidden from Agents and Customers on the main page but still available to put documentation into and hyperlink within a different area of the site.

    0
  • Brian Green
    Comment actions Permalink

    Hi Liz,

    We don't officially support Javascript customizations but this should point you in the right direction. 

    1. Right-click on the category you want to hide and grab URL. You'll want the last part after the .com that looks like /hc/en-us/categories/200187754-Example-Category

    2. Navigate to your Customize design page and go to Edit theme » JS

    3. Add the following in your JQuery script with the last part of the URL you saved from the category you want to hide. 

    $("section.category").has("a[href$='/hc/en-us/categories/200187754-Example-Category']").remove();

    That should be all you need to be on your way. I hope this helps!

    0
  • Wes Drury
    Comment actions Permalink

    @Brain - Thanks for the code as I was going to suggest the same however you beat me to it - this time :-)

    0
  • Liz
    Comment actions Permalink

    Fantastic, thank you all so so much!!

    0
  • Robert
    Comment actions Permalink

    Hi. I just tried this piece of code and it doesn't work. Any other suggestions or edits we might be missing?

    0
  • Wes Drury
    Comment actions Permalink

    Hi Robert it may depend on what placeholder you are using.  Here is some code if you are using the {{category_tree}} placeholder.  You will need to look in your HTML Home Page to see what you are using.

    https://gist.github.com/moderatorwes/5f777ac89b9240faf45f

    0
  • Robert
    Comment actions Permalink

    OK. So it's just a matter of targeting the right element. In my case the following worked.

    $('li:contains("Login Support")').hide();

    1
  • Wes Drury
    Comment actions Permalink

    @Robert - Yes once you have the right element then you should be good to go.  Glad to hear you got it working.

    0
  • Jason Broom
    Comment actions Permalink

    I'm a little late to this thread, but using Robert's example, I was able to hide a category from the home page. I'm using Humble Squid theme.

    However, McCabe Tonna asked a pertinent question. I want to hide a category from the home page for stylistic reasons, but want the articles searchable for agents and customers. Unfortunately, hiding a category also means any articles in that category are not displayed in the search results.

    Is there a remedy for this? Thanks.

    0
  • Wes Drury
    Comment actions Permalink

    Jason instead of using .remove try .hide

    $("section.category").has("a[href$='/hc/en-us/categories/200187754-Example-Category']").hide();

    Not sure if that will work but you could give it a try.  If not I have another solution for the search which will pull from the API.  That solution is here:

    https://support.zendesk.com/hc/en-us/articles/203661396-Adding-autocomplete-to-your-Help-Center-search-bar

    Hope this helps and goodluck.

    0
  • Rebecca White
    Comment actions Permalink

    Hi,

     

    How can this be done with the Handlebars.js and Sept Update?


    I'd like to hide a category on the home page and I am guessing it is in this code:

     

    <section class="knowledge-base">
    {{#if categories}}
    <div class="category-tree">
    {{#each categories}}
    <section class="category">
    {{#if ../has_multiple_categories}}
    <h2><a href="{{url}}">{{name}}</a></h2>
    {{/if}}
    {{#each sections}}

     

    I tried something along lines of unless categories.name = "example" but get a syntax error.  Any help would be great :)

     

     

     

    0
  • Rebecca White
    Comment actions Permalink

    I found out how to hide the category with an is..else statement - but this just hides the category and not the individual sections beneath it.

     

    I was looking at doing the same for the sections - but there are 10+ sections I need to hide so doing with the ID and name isn't really plausible.  Unfortunately it doesn't look like the section object has a parameter for which category is their parent so i could use this to hide all sections - thoughts?

    0
  • Jake Bantz
    Comment actions Permalink

    Hi everyone!

    I just saw this post and wanted to offer some feedback on how to accomplish this using Curlybars. I am using the default code from the Swiftest Elk Theme to help identify where you would need to make the changes. The main key here is the 'isnt' statement I have added. This defines the behavior only when the category has the id I've identified. If the id matches, we will take no action:

    <section class="knowledge-base">
    {{#if categories}}
    <div class="category-tree">
    {{#each categories}}
    {{#isnt id 200893063}}
    <section class="category">
    {{#if ../has_multiple_categories}}
    <h2><a href="{{url}}">{{name}}</a></h2>
    {{/if}}
    {{#each sections}}
    <section class="section">
    <h3>
    {{#if internal}}
    <span class="visibility-internal" data-title="{{t 'internal'}}">
    <span class="visibility-internal-icon"></span>
    </span>
    {{/if}}
    <a href="{{url}}">{{name}}</a>
    </h3>
    {{#if articles}}
    <ul class="article-list">
    {{#each articles}}
    <li {{#if promoted}} class="article-promoted" {{/if}}>
    {{#if promoted}}
    <span data-title="{{t 'promoted'}}">★</span>
    {{/if}}
    <a href="{{url}}">{{title}}</a>
    </li>
    {{/each}}
    </ul>
    {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/if}}
    {{else}}
    <i class="section-empty">
    <a href="{{url}}">{{t 'empty'}}</a>
    </i>
    {{/if}}
    </section>
    {{else}}
    <i class="category-empty">
    <a href="{{url}}">{{t 'empty'}}</a>
    </i>
    {{/each}}

    {{#if more_sections}}
    <div>
    <a href="{{url}}">{{t 'see_all_sections'}}</a>
    </div>
    {{/if}}
    </section>
    {{/isnt}}
    {{/each}}

    {{pagination}}
    </div>
    {{/if}}
    </section>

    The {{#isnt}} and {{/isnt}} open and close the conditional statement used to hide the category 200893063.

    Hope this helps!!

    0
  • Edmund Eng
    Comment actions Permalink

    Hello,

    Looking for help as I'm unable to hide some of my Category Blocks with Brian Green's solution.

    $("section.category").has("a[href$='/hc/en-us/categories/200187754-Example-Category']").remove();

    I'm trying the code with the Copenhagen theme.  Below is part of my Home Page HTML.  I can't figure out the placeholder (target element) I should be working with.  Any help will be much appreciated.

     

    <section class="section knowledge-base">
    <!-- section class="categories blocks" style="margin-bottom:60px;">
    <ul class="blocks-list">
    {{#each categories}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">{{name}}</h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/each}}
    </ul>
    {{pagination}}
    </section-->

     

     

     

    0
  • Wes Drury
    Comment actions Permalink

    @Edmund - There is no need to do this with JavaScript anymore so you can remove that code from the JS tab.

    Like Jake mentioned above you want to use the  {{#isnt name 'NAME OF CATEGORY'}}   placeholder.

    Right below your {{each categories}}

    ADD  {{#isnt name 'XXX'}}   XXX=name of your category

    Find the {{/each}}

    RIGHT ABOVE ADD {{/isnt}}

     

    Your exact code would look like this to hide the "ACCESS" Category

    <section class="section knowledge-base">
    <!-- section class="categories blocks" style="margin-bottom:60px;">
    <ul class="blocks-list">
    {{#each categories}}

    {{#isnt name 'ACCESS'}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">{{name}}</h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>

    {{/isnt}}
    {{/each}}
    </ul>
    {{pagination}}
    </section-->

     

    0
  • Edmund Eng
    Comment actions Permalink

    Wes!  Thank you so much for pointing out Jake's solution and your step by step guidance.  Truly appreciated!

    The code and your instructions worked like a charm.  Thank you so much from a non-coder!

     

    0
  • Wes Drury
    Comment actions Permalink

    @Edmund - Glad to hear everything worked out.  Best of luck.

    0
  • Tapio
    Comment actions Permalink

    I have listed all the categories with sections and articles with this:

      <section class="categories">
      {{category_tree_with_article}}
      </section>

    on Home Page.

    What I would like to do is to hide certain categories and leave some.

    Tried multiple solutions from this thread without luck.

    0
  • Wes Drury
    Comment actions Permalink

    @Tapio - You will need to do this with the curlybars so that you can use the {{isn't}} to exclude the category.  Your code should look like this.  I copied this from the Wiry Merchant theme.

    <section class="knowledge-base">
    {{#if categories}}
    <div class="category-tree">
    {{#each categories}}
    <section class="category">
    {{#if ../has_multiple_categories}}
    <h2><a href="{{url}}">{{name}}</a></h2>
    {{/if}}
    {{#each sections}}
    <section class="section">
    <h3>
    {{#if internal}}
    <span class="visibility-internal" data-title="{{t 'internal'}}">
    <span class="visibility-internal-icon"></span>
    </span>
    {{/if}}
    <a href="{{url}}">{{name}}</a>
    </h3>
    {{#if articles}}
    <ul class="article-list">
    {{#each articles}}
    <li {{#if promoted}} class="article-promoted" {{/if}}>
    {{#if promoted}}
    <span data-title="{{t 'promoted'}}">★</span>
    {{/if}}
    <a href="{{url}}">{{title}}</a>
    </li>
    {{/each}}
    </ul>
    {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/if}}
    {{else}}
    <i class="section-empty">
    <a href="{{url}}">{{t 'empty'}}</a>
    </i>
    {{/if}}
    </section>
    {{else}}
    <i class="category-empty">
    <a href="{{url}}">{{t 'empty'}}</a>
    </i>
    {{/each}}

    {{#if more_sections}}
    <div>
    <a href="{{url}}">{{t 'see_all_sections'}}</a>
    </div>
    {{/if}}
    </section>
    {{/each}}

    {{pagination}}
    </div>
    {{/if}}
    </section>

    0
  • Kunal Patel
    Comment actions Permalink

    @Wes 

    Thanks for your post, but I'm not certain how to hide multiple categories.

    I was able to hide 1 category using the {{/isnt}} method you mentioned above, however what if we are trying to hide 2 or more? Since we can't nest multiple isn't statements.

    Essentially what's the best way to do

    ISNT A or B or C

    For example if I wanted to hide 3 categories, General and Popular Articles and Frequently Asked Questions

    I can't simply just write

    {{#isnt name 'General’ or ‘Popular Picks’ or ‘Frequently Asked Questions'}}

    BTW I'm trying this all in the Copenhagen theme 

    0
  • Jake Bantz
    Comment actions Permalink

    Hi Kunal,

    It may be easier to achieve hiding multiple categories by using some is statements instead. You can nest the is statements within the else to allow you to check multiple categories. Here's the code I used:

    {{#is id 200893063}}
    {{! do nothing}}
    {{else}}
    {{#is id 200117739}}
    {{! do nothing}}
    {{else}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">{{name}}</h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/is}}
    {{/is}}

    I hope this is helpful. Nesting the statements can get bit tricky, but the theme editor will hopefully point you towards any syntax errors if you do encounter them.

    0
  • Yotan Halfon
    Comment actions Permalink

    Hi All,

    I'm real late to the party, but I'm having the same issue, trying to hide a number of categories from the homepage, but without success.

    Tried both:

    $('li:contains("X")').hide();
    $("section.category").has("a[href$='/hc/en-us/categories/200187754-Example-Category']").hide();

    but none seems to work.

    This is my homepage code:

    <section class="home-wrapper category-list-section section-padding">
    <div class="container">
    <div class="row">
    <div class="col-xs-12">
    <ul class="hc-category-list text-center">
    </ul>
    </div> 
    </div> 
    </div>
    </section>
    <section class="wrapper-home section-padding">
    <div class="container">
    <div class="category-tree">
    <h3 class="articles-title"><span>Popular Help Articles</span></h3>
    <!-- Zendesk's articles Component display recently viewed articles -->
    {{recent_articles}}
    </div>
    <div class="category-tree">
    <h3 class="articles-title"><span class="promoted-head">Promoted Articles</span></h3>
    <!-- Zendesk's articles Component display promoted articles -->
    {{#if promoted_articles}}
    <section class="promoted-articles">
    <h3>{{t 'promoted_articles'}}</h3>
    <ul>
    {{#each promoted_articles}}
    <li>
    <a href="{{url}}">{{title}}</a>
    </li>
    {{/each}}
    </ul>
    </section>
    {{/if}}
    </div>
    </div>
    </section>

    Obviously the Categories are created in the <ul>, so I cant understand why $('li:contains("X")').hide(); is ignored.

    Thanks for any assistance!

    0
  • Wes Drury
    Comment actions Permalink

    @Yotan - JQuery is no longer needed with the new curlybar framework.  Most of the post where JQuery was used was over two years ago.

    You can now utilize the  'isnt' statement and the 'is' statement inside of your HTML code.  Please refer back up to my code along with Jakes code where he is nesting the 'is' statement.

    {#is id 200893063}}
    {{! do nothing}}
    {{else}}
    {{#is id 200117739}}
    {{! do nothing}}
    {{else}}
    .........
    0
  • Chris Sztuka
    Comment actions Permalink

    Hi @Wes - long time follower of your work and guidance. As always - great job with all the work you do!

    I've been thinking about this for a while but not sure of the best way to go about it.

    I'd like to either hide a specific section name and url link. 

    OR

    since the end goal is to insert an asset (banner-like image) in between categories to divide the home page up a bit. 

    Currently, this is what I got https://basementfilms.zendesk.com/hc/en-us

    Obviously, I just need that image to appear but no link and no other text associated with it.

    Thanks ahead of time for any assistance you provide!

    0
  • Wes Drury
    Comment actions Permalink

    @Chris - Thanks for the comments and glad to hear you've put some of my code to use.  You should be able to split your categories up by using some if statements.  Call your image asset then display the rest.  Someone else just asked that question a few days ago and I was going to throw some code examples up so as soon as I get to that I will post the code here for your review.  By the way, I'm digging your Help Center so keep up the good work.

    0
  • Chris Sztuka
    Comment actions Permalink

    @Wes - Appreciate the kind words :)

    While I wait for your solution (take your time - you are a busy individual ;) - I figured I would expand on my original request a bit with more detail.

    The layout I'm striving for is:
     
    1 Wide Category
    Wide Image banner
    3 Thin Categories 
    Wide Image banner
    3 Thin Categories 
    1 Wide Category
     
    I would love to be able to add specific sections or articles to the home page (based on their ID) that would appear in the same format as a category.

    Lastly, as you've seen with my link, I'm using svg as category icons - would it be possible to have a jpg or png behind those icons? So it would be an animated svg with a transparent background layered on top of a png. 

    Really appreciate the support!
    0
  • Wes Drury
    Comment actions Permalink

    @Chris - See the code I posted here as you could something similar but replace with images instead of the words.  Let me know if you have further questions.

    https://support.zendesk.com/hc/en-us/community/posts/360004405907/comments/360002260608

    0
  • Anh Le
    Comment actions Permalink

    Hi. So is there any easy way to hide a category in front-end yet? It's like a draft category.

    0

Please sign in to leave a comment.

Powered by Zendesk