Forums/Community/Community tips & tricks

How to collapse categories (Web portal)

Mikhail Zakharov
posted this on August 24, 2012 03:27

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 

 

Comments

User photo
Jennifer Rowe
Zendesk

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

August 24, 2012 09:09
User photo
Adam
Zendesk

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...

 

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!!

August 24, 2012 14:50
User photo
Mikhail Zakharov
Портал технической поддержки

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?

August 25, 2012 06:54
User photo
Jennifer Rowe
Zendesk

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

August 27, 2012 09:11
User photo
Adam
Zendesk

Hi Mikhail,

 

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

August 27, 2012 09:22
User photo
Arnaud de Theux
Zendesk

Hi Mikhail,

This is really cool, thanks a lot!

August 27, 2012 13:12
User photo
Mikhail Zakharov
Портал технической поддержки

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.

September 04, 2012 02:11
User photo
Mikhail Zakharov
Портал технической поддержки

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

September 06, 2012 02:04
User photo
Arnaud de Theux
Zendesk

Testing again! :-) Thanks.

September 06, 2012 02:33
User photo
Jennifer Rowe
Zendesk

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!

September 06, 2012 09:30
User photo
David Rose
navigator

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. 

February 13, 2013 03:00
User photo
Mikhail Zakharov
Портал технической поддержки

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("&nbsp;<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("&nbsp;<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("&nbsp;<span style='font-size: 13pt; font-family:monospace; cursor: hand; cursor: pointer;' id='hide_category_" + id_value + "' href='#' onclick='HideCategory(" + id_value + ")'>[-]</span>");

February 13, 2013 04:39
User photo
David Rose
navigator

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.

February 13, 2013 04:46
User photo
Jennifer Rowe
Zendesk

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

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

February 13, 2013 08:50
User photo
Mikhail Zakharov
Портал технической поддержки

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.

February 28, 2013 00:48
User photo
Andrew J
BizStudio NZ

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.

February 28, 2013 02:19
User photo
Justin Seymour
Zendesk

Thanks for the update, Mikhail! 

February 28, 2013 06:47
User photo
Mikhail Zakharov
Портал технической поддержки

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

February 28, 2013 07:47
User photo
Jennifer Rowe
Zendesk

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!

February 28, 2013 12:57
User photo
Jimmy
pinterest

This is great!  Thank you Mikhail.

March 06, 2013 07:48
User photo
Richard Morrison

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
March 20, 2013 04:41
User photo
Mikhail Zakharov
Портал технической поддержки

Hi Richard,

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

March 20, 2013 04:58
User photo
Jennifer Rowe
Zendesk

Very nice, Richard! Thanks for sharing!

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

March 20, 2013 08:20
User photo
Mathew Gantnier
peterpanbus

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. 

April 18, 2013 06:36
User photo
Mikhail Zakharov
Портал технической поддержки

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.

April 18, 2013 07:18
User photo
Andrea Saez

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

April 18, 2013 07:20
User photo
Mathew Gantnier
peterpanbus

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

April 18, 2013 09:28
User photo
Jennifer Rowe
Zendesk

Mikhail, thanks for the update!

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

April 18, 2013 09:37
User photo
Mathew Gantnier
peterpanbus

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 :)  

 

April 18, 2013 10:28
User photo
Mikhail Zakharov
Портал технической поддержки

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

April 20, 2013 12:52
User photo
Mohan Achar
svndocs

thanks Mikhail, this works great

April 30, 2013 15:28
User photo
Gauri D
pchelpdesk

Hi Mikhail,

Thanks for a great tool! This has made managing our content so easy.

I do have one question though. How can I make only the first couple of forums expanded by default and the others collapsed?  On support.zendesk.com, the 'What's Happening' forum is expanded by default but the others are collapsed. 

I like this approach as it works well with highlighting certain forums.

Thanks again,

Gauri

May 15, 2013 17:30
User photo
Mikhail Zakharov
Портал технической поддержки

Hi Gauri,

That's great that you found it useful.

It's possible to skip several categories while collapsing. Are you using my script or version from Richard Morrison?

May 28, 2013 00:41
User photo
Gauri D
pchelpdesk

Hi Mikhail,

 

I am using your script (from your post on Feb 28th). 

 

Thanks,

Gauri

June 03, 2013 16:33
User photo
Millie Zhou
centraldesktop

This is great, thank you Mikhail!

Just wondering, is anyone else experience issues with the collapsing not working after toggling from "Overview" to "Recent" and then back to "Overview" again?

June 04, 2013 13:57
User photo
Mikhail Zakharov
Портал технической поддержки

@Gauri, Ok I'll take a break and make a version where you can select expanded-by-default categories.

 

@Millie, Could you post a link to your portal where I can see the issue? This widget works on pages with categories. "Overview"  and "Recent" features placed inside category.

June 04, 2013 22:43
User photo
Millie Zhou
centraldesktop

Certainly. Our portal is located at https://centraldesktop.zendesk.com

The Overview | Review section is located on the forum-nav. 

June 05, 2013 08:15
User photo
Mikhail Zakharov
Портал технической поддержки

Hi Millie,

Nice customization on your portal! 

I've found this issue on my portal too. So I think it's causes because page not reloading after pressing "overview". Script not working in this case.

Simple way to fix it - change "overview" link. It's decrease performance but works

Add next code after line "if (s_section == 'forums' || s_section == 'home') {"

$j("p.forum-nav a#forum_nav_overview").attr("href","")

 

June 06, 2013 23:01
User photo
Millie Zhou
centraldesktop

Hi Mikhail,

Thank you so much for looking into that and sharing your code! I've applied it to our portal and it works great! :)

June 07, 2013 08:23
User photo
Jennifer Rowe
Zendesk

Yes, thanks for helping Mikhail!

June 10, 2013 13:32
User photo
Artur Szalak

Hi Millie,

How did you achieve categories not being a link to category but actually collapsing/expanding the category only?

Appreciate your help,

Thanks

Artur

June 27, 2013 05:34
User photo
Artur Szalak

Hi MIkhail,

Great work,

I'm using the fork that has categories collapsed by default. What I'm trying to achieve now is to remove links from category names so that when user clicks on the category name it expands the category as opposed to sending them to new page.

Your help would be appreciated.

Cheers

Artur

June 27, 2013 07:49
User photo
Kirk

Excellent extension, thank you Mikhail and Richard!  I like the collapsed by Default.

July 05, 2013 06:27
User photo
Will Leverett

Hi Mikhail and Richard,

This is really fantastic.

Our users have requested what Artur requested above: remove links from categories so that the click expands/hides the category instead of sending them to the category page.

Help most certainly appreciated... thanks a ton!

Will

July 19, 2013 08:35
User photo
Millie Zhou
centraldesktop

@ Artur and Will

 

This is the CSS that I used to deactivating the link on the category names:

 

.content .frame.columns h2, .content .frame.columns h2 a {
pointer-events: none;
}

 

BTW, sorry for the delayed response!

July 19, 2013 08:51
User photo
Will Leverett

This is fantastic, thank you Millie (and Mikhail and Richard!)!!

July 19, 2013 09:44
User photo
Jennifer Rowe
Zendesk

This is one of our most popular community tips of all time! 

Glad you guys like it!  Big thanks to Mikhail. 

July 19, 2013 10:11
User photo
Info

I'm trying to set my main forum page so that the headings are collapsed by default. I'm using Richard Morrison's script from https://gist.github.com/mozz100/5203829. What I'm finding is that when I expand a heading or two on the page, then close my browser, the next time I open my browser and return to the page, the headings that I expanded previously are still expanded. I have tried this with Chrome, MSIE and Firefox and I get the same results with all three.

Is there a way to make it so that every time someone visits the forum page, the headings are collapsed, regardless of the state of the page on their previous visit?

 

August 05, 2013 05:49
User photo
Mikhail Zakharov
Портал технической поддержки

Hi,

This script is saves header state in cookies. So if user expanded category and reopens page it'll be expanded.

In your case this script will be simplier. Fastest way to modify it is

1. Delete lines

var ckie = $j.cookie('hide_category_' + id_value);
if ((ckie == 'yes') || (collapsed_by_default && !(ckie))) {
HideCategory(id_value, IsAgent);
} else {
ShowCategory(id_value, IsAgent);
}
2. Insert line (instead of deleted)
HideCategory(id_value, IsAgent);
September 08, 2013 23:57
User photo
Jennifer Rowe
Zendesk

Hi Mikhail, nice to see you! And thanks for helping (as always!).

Have you guys starting using Help Center yet? I'm wondering if any of your amazing (and very popular!) tips can be easily modified and applied to HC... Maybe a future project. :)

September 09, 2013 09:29
User photo
Dan Smith
nimblecommercesupport

This is exactly what I have been looking for. Has anyone done this in Help Center yet?

March 20, 2014 11:15
User photo
Jennifer Rowe
Zendesk

@Dan, you probably saw Wes's answer in the other post...but for anyone else who's interested, here's the answer for making this work in HC.

 

@Dan - The accordions are actually created with the Bootstrap javascript.  Follow the instructions in the below link which will setup your Document Head and copy the CSS into your CSS.

https://support.zendesk.com/entries/27128856

Once you have that then go to my GitHub page(https://github.com/moderatorwes/Zentastic) and navigate to JS/js.txt.  Inside there copy the section that has  //setup dynamic accordion// 

On your Home page add:

<div class="panel-group" id="accordion">
            <div class="panel panel-default accordian-group">
                {{category_tree}}
            </div>
        </div>
Give that a shot and let me know if you have any issues as I didn't have time to test everything but that should be the meat of it.
March 20, 2014 14:10
User photo
Vincent Arnoux
brion

@Jennifer: This part:

<div class="panel-group" id="accordion">
            <div class="panel panel-default accordian-group">
                {{category_tree}}
            </div>
        </div>

 

Does not work and just displays the entire category tree in the first header of the accordion. Has this been tested in the HC?

April 10, 2014 01:22
User photo
Andrea Saez

@Vincent, moderator @Wes wrote a bit to get categories to be collapsible in Help Center. I'll get him to drop in and paste the link directly to you :)

April 10, 2014 04:37