Homepage Categories As Accordion/Dropdown

I tried everything from this link, but doesn't work for me. I think I'm on the newer system:

https://support.zendesk.com/entries/21920648-How-to-collapse-categories-Web-portal-

Hey Josh,

If you're on Help Center (the newer system), try this tip from Wes:

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

Hey Jennifer. Thanks for your time. That link looks like its just for individual articles, and would require adding custom code for each article. But I would like the dropdownns to be for homepage categories. I've attached screenshot. I would like Documentation and Announcements to be accordions/dropdowns. 

Oh, yes, you're right. Sorry for misunderstanding. 

Moderator Wes helped a user with this in another post, but then another user reported it wasn't working... Try posting your question in Wes's article about collapsing article heads and I'm sure he'll help you figure it out. 

FYI, here's the answer he gave before (which might need some tweaking):

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.

@Jennifer and Josh - Thanks for jumping in Jennifer and giving the correct answer.  The entire Zentastic theme is built with dynamic accordions on the home page.  You can find all the code that you need on the links that Jennifer provided your you can copy the entire Zentastic theme to your Help Center then edit it from there.

Josh - If you would like to see the entire Zentastic theme live on my test site just let me know and I will activate it.

Hi @Wes I'm trying to make our Help Center look like this: http://staples.bookrenterstore.com/help. I can't seem to figure it out. Not only do I want the accordion style by categories (not by articles), but I also want the style of the answer and questions inside.

How should I go about this? I'm afraid I don't really code.

@Denielle - You can't really get it to function exactly the way that Staples has it.  The closest you can get is by using "The Curious Wind" theme.  Have you played around with that theme.

@Wes Yeah I saw that theme, but I don't know how to make the categories be the accordions rather than the articles. The closest I got to it was writing the articles themselves in the code. As far as the question and answer style, I can easily code that, but I don't want the articles to be the accordions.

Hope that makes sense.

So you want the articles and sections to be accordions only.  Would the Wiry Merchant be closer to what you are looking for then.

Yeah, but I don't like it that much. The Staples link I gave is exactly what we have in Help Center, as our company (BookRenter) is partnered up with Staples. So the categories in the Staples one is how I want Help Center to be like. 

@Denielle - You could always hardcode that way but it would be a pain to update everything as everything would be contained in the HTML and you would not use Zendesk's categroies, sections, articles, etc unless you use them for other areas.  The only other option would be to use the API which would be alot more complex.  Could you use the categories and articles for other areas and just hardcode your FAQ.  How many articles are you talking about here.

I might end up having to hardcode everything. In any case, I have set our Help Center to the Noble Feast theme for now, and maybe I can figure out how to implement accordions to that.

Thank you for your assistance @Wes!

@Danielle - You could use this theme that I already made responsive then I can give you code for your accordions.

https://github.com/moderatorwes/Wiry-Merchant

I selected Wiry Merchant in Help Center. What next @Wes?

So on the link I sent you will need to go and copy all of the HTML, CSS, and JS code that I have so for example select HTML - Document Head, on my HTML - Document Head copy and past and overwrite was Zendesk has.  You will need to do this on all the pages.  I have them in order on the link above.

Thanks @Wes! I've changed all the code to what you had on the link.

Great so how did you want the accordions.  

Categories - Question - Answer

or

Categories - Question & Answer

I believe the site you showed be was Categories - Question & Answer.

Categories - Question & Answer. And if possible to make a distinction between Q&A (maybe bold for Q and normal for A?).

I appreciate the help @Wes!

@Danielle - I'm working on some code for you now.  I will post a link to the code so that you can take a look today or tomorrow depending on work load.

@Wes Thank you so much!

Take a look at the below solution and let me know if something like this would work.

http://www.bootply.com/8ANQcAqoj7

@Wes I wasn't able to click on the accordions, but what I could see works. Would you like me to try the code now?

@Denielle - I added some code so the accordions would drop down on mouse hover instead of clicking.  You could just remove the javascript code if you don't like that.  Sure go ahead and plug in exactly like I have it to your Home Page HTML and see what you get.  It should work without the Javascript as that was extra.

This is great @Wes! Thank you very much!

How can I customize the font and color of the texts to match the theme?