Copenhagen Theme - Home Page Accordions

A new tip from Wes "the-one-and-only-help-center-community-badass" Drury!

Woo hoo. Looks like he wants to have one of the top tips of the year for the third straight year....could it be this one!?

Looks like a great tip. Thanks, Wes.

Nice Wes!

Did you deliberately chose different colors for the accordion and section/article links in your demo?

I guess that makes sense to highlight the accordion, but would love to see them using the same color scheme.

Great job!

@Jacob - Yes I changed the color to match my theme.  You can easily change the colors to any color that you want by using the CSS that you copied in.  When you see #388800 that is the green color I used, you can change it to $color_1 through $color_4 to match the default theme.

@Wes - where I'd really like to do this is our category pages. We're currently using Humble Squid and have customized our home page already with image/text boxes for our four categories--but two of our categories have 8 sections and even cutting the article list to show 3 instead of the standard 6, makes for a long page (see https://customer.real.com/hc/en-us/categories/200569228). Can this code be adapted to the category page? If so then I might consider switching to Copenhagen if that's a requirement for this to work.

Thanks!

@Larisa - Yes I don't see why you couldn't use the same code on the category page.  Not sure if its an exact copy and paste but I will try real quick for you.

@Larisa - I have to make two changes for the category page as I had to use the full path but it does work.  Here is an example.

https://zenultra.zendesk.com/hc/en-us/categories/201158796-General

I just included the code inside of Gist that's above.  You will now see the full code for the category page.

Code Here.

Awesome, thank you so much!

@Larisa - I just looked at your current HC and it wouldn't take a lot to get your entire look and feel over to the Copenhagen theme.  I'm currently in the process of moving all of Zendesk's Help Centers over to the Copenhagen theme.  If you need help moving your theme just let me know.

Accordions do not seem functional on mobile ... at least not on iPhone's current mobile safari or Google Chrome

@Brian - I was able to confirm this as well.  Let me track down the issue and I'll get it fixed.

@Brian - the issue has been resolved and I updated my CSS file on the GIST.  I added line 20 on my Gist which was  cursor: pointer;

I verified that it was now working on the iPhone.

Nice one!

I tried to hide more than one category with the {{#isnt name 'Getting Started' 'Product Updates'}}  but I couldn't find the right syntax. 

Only way I manage was like that:

{{#isnt name 'Getting Started'}}
  {{#isnt name 'Product Updates'}}
  {{/isnt}}
{{/isnt}}

Any tip?

@Thibault - When you have more than one then the condition evaluates as True or False so the way you did it was the best way to implement at this time.

Thanks for including the live demo, Wes!

@Mike - Your welcome and enjoy :-)

@Wes - how can we adjust this code to combine accordions with category icons?

Also, can the accordions' width be adjusted? On desktop it looks a little strange being full width. On mobile, that seems fine.

@Justin - Yes everything you are asking is possible with a few changes to the code.  What kind of icons were you thinking about using, FontAwesome or are you uploading your own images to the asset area.  Were you wanting an icon before the category title.  The more details you can give me, the better code I can give you.

Thanks for the help, Wes. Basically I want to add our icon small icon images that we upload to the assets area. Honestly, I like the accordions but our most ideal situation would be more of a grid style than list style - is that possible? The behavior we really want is to click one of three categories and populate FAQ articles below based on whichever category is selected. For example, on Zendesk's main support page....if you click the 'knowledge base' box....the accordions populate down below. This is the behavior we really want (preferably with the boxes being categories, then the accordions show the sections within that category). These accordions seem to be the closest code I can find. Any thoughts/advice would be very helpful!

@Justin - Anything is possible it's just a matter of rearranging your code to make it appear how you want.  Adding icons is pretty simple but you would have to touch the CSS a little to get it just how you want it.  If I have some time I will put some icons next to the accordions so you can see how it looks and the code behind it.

Thanks Wes, I'd really appreciate that!

@Justin - I updated my demo with some images.  The code I used was.

HTML (right below the <a role> and right above the <h3>{{name}}</h3>

{{#is name 'FAQ'}}<img class="catimgs" src="{{asset '77_Essential_Icons_Book.png'}}" />{{/is}}
{{#is name 'General'}}<img class="catimgs" src="{{asset '77_Essential_Icons_Comment_Lines.png'}}" />{{/is}}

CSS ( you will need to play around with the magin depending on your image size

.catimgs {
float: left;
margin: -10px 10px 0 0;
}

That's awesome - thank you Wes! Is it possible to resize the width of these accordions?

@Justin - sure just add the following CSS.

Thanks. One last question - when I add the padding, the accordions still stack from top to bottom. Is it possible to get say three category boxes side-by-side and when the user clicks one, the accordion for that category opens down below?

@Justin - Yes that is possible as well with some code changes.  I just don't have the time to go through and make that happen right now but you the Guide Knowledgebase can be customized any way you would like.

Cool - thanks for all your help! You've got me way ahead of where I was. :)

@Justin - Your welcome and best of luck.

Hey Wes - any ideas as to how we could center the logo in our Help Center at the top? When I put the center brackets around the logo url, the logo gets resized.

@justin - that would be controlled in the CSS, the logo size and position.  Do you have a link to your Help Center