12

How to collapse categories (Web portal)

We are using a lot of different categories in our forum. And now it looks like a mess =)

For helping users to navigate I'm developed a widget which adding collapsing feature.

Feature:

  1. For each category widget adds a "[-]" button for collapsing. When category collapsed button changes to "[+]"

  2. State "collapsed / restored" saves personally for each user in cookies.

Note: Works only for logged-in users. (deprecated)

How it looks you can see at screenshot in attachment (color stripes from other CSS widget, not from script)

To enable

  1. Add Global Javascript extension

  2. Insert script below

UPDATED at 20 March 2013 (see comments below or forget and just grab a code :) )

Just use the last version of script https://gist.github.com/Mikhail-Zakharov/3465257

Or great fork from Richard Morrison:

  1. option to have categories collapsed by default
  2. when reloading pages, I don't like animations to trigger at page load.  I'm happy for them to occur on clicks but I dislike pages that "twitch" as they load

https://gist.github.com/mozz100/5203829

55 comments

  • 0

    Hi Mikhail, Thanks for another great tip! Can you add a link to your forums so that we can see how it looks?

  • 0

    Hi Mikhail, 

    First off, I really like what you've done. It's slick and elegant. I wanted to mention that for pasting code in the forums, one thing that works really well is using GitHub's Gists. Take a look at this example: https://support.zendesk.com/entries/21562288-creating-a-custom-html-form-for-ticket-submission

     

    Scroll down a bit and you should see what I'm talking about. 

     

    Overall, I LOVE the widget though and thanks again for the fantastic ideas!!

  • 0

    Jennifer, I added a screenshot. Script works only when user is logged in. Because Zendesk's site markup for anonymous users does not contain category ID's.

    Adam, I try to insert GitHub's Gists but there is no HTML editor in my comment's frame. Should I remove plane script from my post and leave only links?

  • 0

    Thanks, Mikhail--love it! I'm going to promote this tip in our social media channels.

  • 0

    Hi Mikhail,

     

    I didn't realize you couldn't post HTML from your view. Sorry about that!

  • 0

    Hi Mikhail,

    This is really cool, thanks a lot!

  • 0

    I found that now my end-users don't see a collapsing feature. Because Zendesk's markup not contains category id in DIV.

    I'll try to build new version of my code.

  • 0

    I've updated this post. News version of script was published.

    Now it works on end-users and anonymous pages!

    Direct link to script on Gists  https://gist.github.com/3465257/51e787cc2fb1933bfbdb78874c4adaeeb104c8fb

  • 0

    Testing again! :-) Thanks.

  • 0

    Just when we thought it couldn't get any better! :) Thanks for updating the original post, too, Mikhail. That will definitely help users find the latest and greatest version of your script! Thanks!

  • 0

    This is great. But is there any way to put the [+] and [-] symbols before the Category name e.g
    [+] My Category 1
    [+] My Category 2

    rather than

    My Category 1 [+]
    My Category 2 [+]

    BTW the google doc in the root article gives a 404. 

  • 0

    Hi David,

    Thanks for notice about wrong link! It was a bad idea to store screenshot on other resource. I've attached it to post.

    You can simply put the [+] before the Category name by changing "append" to "before" method:

    Original line:

    base.children('h2').append(" <span style='font-size: 13pt; cursor: hand; cursor: pointer;' id='hide\_category\_" + id\_value + "' href='#' onclick='HideCategory(" + id\_value + ")'>[-]</span>");

    Corrected:

    base.children('h2').before(" <span style='font-size: 13pt; cursor: hand; cursor: pointer;' id='hide\_category\_" + id\_value + "' href='#' onclick='HideCategory(" + id\_value + ")'>[-]</span>");

     

    For great look I recommend to change font style to monospace. Because when you put [+] before your category name it will moving when you press [+].

    And final variant is:

    base.children('h2').before(" <span style='font-size: 13pt; font-family:monospace; cursor: hand; cursor: pointer;' id='hide\_category\_" + id\_value + "' href='#' onclick='HideCategory(" + id\_value + ")'>[-]</span>");

  • 0

    Brilliant, thanks.

    I've also changed

    if ($j.cookie('hide_category_' + id_value) == 'yes') {
    HideCategory(id_value);
    }

     

    to

     

    if ($j.cookie('hide_category_' + id_value) == 'no') {
    ShowCategory(id_value);
    }
    else
    {
    HideCategory(id_value);
    }

     

    so that the default is that the categories are hidden.

  • 0

    David, glad you got it working the way you wanted!

    Mikhail, thanks, as always, for helping! Nice to see you. :)

  • 0

    Recently I saw a pretty good collapsing feature at the main Zendesk site http://support.zendesk.com. With a smooth hiding and arrows.
    Okay, challenge accepted :)
    Here a new version of my widget https://gist.github.com/Mikhail-Zakharov/3465257

    It has a lot of tricks because zendesk's page markup sometimes puzzling.

  • 0

    Just tested this... works fantasticly! Well done Mikhail

    Many thanks for the great tip.  There could be some interesting forks developed for this...  however, I think we will need to see what the new 'Help Centre' gives us first - when it is available... no beta yet :-(

    @ David - I think I like the default hidden option best too.

  • 0

    Thanks for the update, Mikhail! 

  • 0

    Small update.

    To avoid user frustration when presses on a category name and goes deep into category instead expanding of category I've added a link's underlining.

    Two rows before "base.parent().css("cursor","hand");"

    child.mouseover(function(){$j(this).css("text-decoration","underline")});
    child.mouseleave(function(){$j(this).css("text-decoration","none")});

    New edition at the Gists

  • 0

    This is awesome, Mikhail! I love all the improvements. And I'm glad you were up for the challenge (although it probably wasn't really a challenge for you! :). Thanks for posting!

  • 0

    This is great!  Thank you Mikhail.

  • 0

    Hi Mikhail,

    First, thanks so much for sharing your code.  I found this thread straight off Google and had it up and running within minutes.

    I've extended it a little because I preferred:

    1. option to have categories collapsed by default
    2. when reloading pages, I don't like animations to trigger at page load.  I'm happy for them to occur on clicks but I dislike pages that "twitch" as they load

    I achieved (1) with a variable and (2) with a modification to your HideCategory and ShowCategory functions.

    My own code is a fork of yours and is available at https://gist.github.com/mozz100/5203829

  • 0

    Hi Richard,

    Great fork! I tidied in the post and added the link.

  • 0

    Very nice, Richard! Thanks for sharing!

    And, Mikhail, thanks as always for being so responsive and for updating the post!

  • 0

    Is there a way to make this work for logged out users. We have a lot of end users that will be checking the knowledge base without having an account.  I see this is possible on the zendesk support page.  Am I missing something that makes it so that this isn't possible.

    Works great for logged in agents and users. 

  • 0

    Hi Mathew,

    When I've made a first version of script it was based on category ID which was absent in "not-logged-in" markup. And it was a problem to use at anonymous pages.

    But second version can cut ID from "href" attribute of "a" tag.
    And as I see there is no problem to support "not-logged-in markup" anymore :)

    It's interesting to make this changes but takes a time. Maybe Richard Morrison or somebody of Zendesk community can do this faster.

  • 0

    This is awesome, thank you Mikhail! We just implemented this on our site.

  • 0

    This is one of the reasons I love zendesk.  Great community and thanks mikhail I'll adjust as stated and try that.  

  • 0

    Mikhail, thanks for the update!

    Mathew, if you are able to make it work for logged out users, please share with us! Thanks.

  • 0

    Ok well the solution was simple.   And was just me being a bonehead.  The typical check to see if its plugged in fix.  I had the widget set to agents only and once I set it to anyone, including people not logged in it worked like a charm.  I ended up adding in the variable for collapse = true to show them collapsed by default.   So I think the code should work as is, as long as its set up correctly :)  

     

  • 0

    Yep, I just tested. It works fine for logged-out users ;)
    Page markups for logged and not-logged users are same.

Please sign in to leave a comment.