[ARCHIVED] Help Center - Collapsible headers in articles (accordions) | Community
Skip to main content

[ARCHIVED] Help Center - Collapsible headers in articles (accordions)

  • September 24, 2013
  • 102 replies
  • 0 views
ModeratorWes

Zendesk level: Beginner
Knowledge: HTML, CSS, Bootstrap
Time Required: 10 minutes

I will be using the Bootstrap 3 framework for this example.  There are few different ways this can be implemented into your Help Center but we will focus on the easiest way.  With this knowledge, you can easily implement accordions anywhere on your site including articles.

Check out the screencast, then follow the steps below:  http://www.screenr.com/xgZH

 

Let's get started

First we need to include the Bootstrap JavaScript code in your “Document Head” section of your site.  You can get the code from the Bootstrap site - http://getbootstrap.com/getting-started/#download-cdn

**PLEASE MAKE SURE "DISPLAY UNSAFE CONTENT" OPTION IN CHECKED FROM THE GENERAL SETTINGS!

Document Head Section:

https://docs.google.com/a/cibertec.net/file/d/0B-Hs2EzZpGPLdXZQakNOYTdra3M/edit?usp=drivesdk

 

Next we will need to add some CSS for the accordion.  Download the CSS here.

  • Looking at the screenshot above select "CSS"
  • Copy the code to the very bottom or top of the screen.

Now all we need to do is add the code:

  • From your Design Panel select “Add Content” then “Article”
  • Click the html button in the article editor
  • Add the following code - http://bootply.com/82734
  • Edit the code as needed and submit your Article.

If everything went correctly your article should look like the Screenr video above.

    102 replies

    Jennifer16
    • Jennifer16
    • September 24, 2013

    Thanks for another great tip, Wes!

    S
    • Stefan29
    • January 2, 2014

    I'm trying to add the code following the examples but the id="accordion" keeps gettin stripped out so it doesnt work. Can you possibly confirm why this doesnt work?

    ModeratorWes

    @Stefan - I just added some code to my test site and it works fine for me.  You can see it here:   https://moderatorwes.zendesk.com/hc/en-us/articles/201165667-Using-mobile-app-with-SSO-enabled

    Is it possible to give me the URL to your site or article that you are using so I can take a look at it.  Also did you make sure you copied and pasted into the "HTML" and not directly into the article.

    S
    • Stefan29
    • January 2, 2014

    @Wes i got it sorted in the end. Someone had unchecked the "display unsafe tags" option in our help center which was stopping the tags working

    ModeratorWes

    @Stefan - Glad to hear you got everything sorted out.  If you have further questions just let me know.  I'm also about to release a responsive theme to the community.  You can see it in action here:  http://moderatorwes.zendesk.com

     

    J

    I have a question.  When creating the articles, the sections are already expanded when the page loads.  What are we doing wrong that they do not load collapsed?

    ModeratorWes

    Hi Joe can you send me a link to your page by chance so I can take it look.  It sounds like you may be missing some of the code or the javascript is not firing.

    J

    Hey Wes.  Here is the page we are working on. https://adroll.zendesk.com/hc/en-us/articles/202222850-testing-Important-  Looks like some load collapsed and others expanded.  They are able to go back and forth fine when clicked though.  Thanks for the help!

    ModeratorWes

    @Joe - I think the issue is from copying the first accordion as the code on the first one is a little different as it is set to always be open.  Is the end goal here that they all be collapsed when first coming to the page or would you still like the first one to be open.

    J

    We'd like them to all be collapsed when coming to the page.  So we can then expand the sections as needed.  Not sure where I got the code wrong for that.

    ModeratorWes

    Add the below code into a new article and very the functionality. Its easier for me to provide the code instead of looking through your code.   It worked fine on my test site.  You can see an example on my test site here:  https://moderatorwes.zendesk.com/hc/en-us/articles/201165667-Using-mobile-app-with-SSO-enabled

    <div id="accordion" class="panel-group">

    <div class="panel panel-default">
    <div class="panel-heading">
    <h4 class="panel-title"><a href="#collapseOne" data-toggle="collapse" data-parent="#accordion2"> Step 1 </a></h4>
    </div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
    <div class="panel body">
    <p>Text goes here</p>
    </div>
    </div>
    </div>
    <div class="panel panel-default">
    <div class="panel-heading">
    <h4 class="panel-title"><a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2"> Step 2 </a></h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
    <p>Text goes here</p>
    </div>
    </div>
    </div>
    <div class="panel panel-default">
    <div class="panel-heading">
    <h4 class="panel-title"><a href="#collapseThree" data-toggle="collapse" data-parent="#accordion2"> Step 3 </a></h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
    <div class="panel-body">
    <p>Text goes here</p>
    </div>
    </div>
    </div>

    J

    It's strange.  The code we have on our end is the same as it is here but the problem still exists.  I even copied and pasted just this code into a new window and had the same problem.  Could there be an issue with the CSS on the site that might cause this?  We also copied the exactly from the source.  Are there any other files to be referenced in the Document Head section other than the JS file?

    ModeratorWes

    That is strange as you see it worked perfectly on my site.   I don't know of any conflicts between this and Zendesk.  If you copy my code to a brand new article does it not stay collapsed.  I just tried again and it worked on my site.  Maybe there is a conflict with the second accordion that you have.  I'll take a look but if you figure anything out just let me know.

    S
    • Stefan29
    • May 13, 2014

    @Joe, have you checked in the settings to make sure that "display unsafe tags" is checked?? I had a problem with the accordion stuff at first but found that on our site someone had unchecked that box.

    J

    Yeah I am confused too.  When I copy it to a new article the accordation starts out expanded too.  I'll keep looking at it.  I have one other theory but its still strange to me.  I'll let you know what I find out

    J

    Hey Stefan.  Yes that box is checked still.  The accordation effects works fine but page always loads with everything expanded.

    ModeratorWes

    Also off topic but you should look into making your site Responsive as all you have to do is call the Bootstrap CSS file and then edit some of your HTML.  Your Help Center could be brought up on any device and including mobile.  You are already calling the Bootstrap JS file.  I'll be glad to help you do this as I just got done doing this on another site.  Just a thought.

    ModeratorWes

    OK I just tried it on three different sites and it worked across all three so there must be code interfering with it somewhere.  Do you have any custom JS/Jquery running on your site.

    J

    Question.  Why is the code here http://www.bootply.com/82734 different from what you just wrote to me?

    ModeratorWes

    The code that just wrote above has the first accordion collapsed like the rest.  I pulled it from one of my test sites.  The code on Bootply has the first accordion always opened.  The Bootply code was probably written on an older version of Bootstrap like 3.0 and now its on 3.1.

    Here is the official documentation if you want to look at it.  http://getbootstrap.com/javascript/#collapse

    J

    Thanks.  It's strange in that when the page loads the window appears expanded.  But when I click on the button it will expand again almost and then retract normally.  The text will flash on the screen once.  If I used the "collapse in" function it seems to work normally without error

    ModeratorWes

    @Joe - Can you please disable all your custom JQuery/Javascript.  I see that you have a good bit of custom code.  That will at least tell us if some code is interfering somewhere.  

    J

    Hey Wes.  We got it working fine.  Thanks for your patience !

    ModeratorWes

    @Joe - Don't leave me hanging.  What was the issue and I'm glad to hear you got it working.

    J

    As I suspected it had to do with the JS layout in the Document Head section.  I ruled out everything else, even recreated the script using just HTML separately and then compared what could be the issue.  Turns out we had accidentally deleted one of the files needed there.  *face palm*

    Terms & ConditionsCookie settingsAccessibility statement