Help Center - Collapsible headers in articles (accordions)
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.
-
So I tried the code that was you gave as an example for Jen above, and I the accordions aren't collapsable
-
I got the accordions in place, but they don't open when I look at the article in preview. I can't uncollapse them.
-
Hi Jacque,
Do you have an article up anywhere with an accordion code sample I can look at? It'd be easier to see how you have things setup, and thus easier to try to help!
Thanks!
-
hi, i have a problem with its code. Can some help me please. Here the link to my problem.
-
Not sure if anybody else is having this issue, but when I rolled out these changes, my form picker stopped working. My users are unable to select which form they're submitting a ticket for. Has anybody had this issue? Know any workarounds?
-
@Michael can you provide us with a link to your help center if it's public available?
-
Michael Goldman: was the issue regarding the form picker resolved? I'm currently having the same problem and noticed that when I disable the <script> that calls jquery-3.3.1.slim.min.js the form picker works again.
Is it possible to keep below code included in the document_head without my form picker being broken?
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
Please sign in to leave a comment.
97 Comments