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.
-
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?
-
Adobe Inc.: 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>
-
Is installing bootstrap necessary for accordions to work in zendesk guide centers?
-
Hey Lucy Su
It's not the only way, but it's likely one of the easiest ways to get this functionality. Bootstrap takes care of all code that makes the accordions move, you just need to assign the appropriate classes to your accordion sections.
-
Hello Wes,
Your screenr video/photo is no longer available. Do you have another place where you put your example?
-
Hey Wes Drury,
Any chance you have an updated link that shares what the previous one did?
Thanks!
-
Hey Wes! I've tried to copy the HTML from this link, and it appears to be missing: https://www.codeply.com/go/bp/82734
I'd love to make a connection, if you're available.
Thanks!
Danielle
-
Hi Danielle,
Wes is unfortunately no longer regularly around the Zendesk community; he switched jobs. We have pinged our other moderators to see if they can be of any assistance.
-
@Nicole - I wouldn't say that I'm no longer around as I still see all the emails and comments and glad to see that most of my solutions are still working after 4 and 5 years. Sorry, @Danielle I don't really have a way to test anymore but there are some good moderators around that should be able to assist.
-
Well, I stand quite happily corrected! Good to see you, Wes :)
Please sign in to leave a comment.
102 Comments