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.
-
Thanks for another great tip, Wes!
-
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?
-
@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.
-
@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
-
@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
-
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?
-
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.
-
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!
-
@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.
-
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.
-
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> -
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?
-
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.
-
@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.
-
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
-
Hey Stefan. Yes that box is checked still. The accordation effects works fine but page always loads with everything expanded.
-
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.
-
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.
-
Question. Why is the code here http://www.bootply.com/82734 different from what you just wrote to me?
-
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
-
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
-
@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.
-
Hey Wes. We got it working fine. Thanks for your patience !
-
@Joe - Don't leave me hanging. What was the issue and I'm glad to hear you got it working.
-
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*
-
@Joe - LOL well that does happen at times. I'm just glad that you got it all figured out. Don't forget to make your site responsive :-)
-
Hi Wes, I added the accordions thanks to your instructions. However, the Bootstrap library seems to have overridden the looks of the {{search_bar_small}} component (made it 2,3 times taller). Can you show me how to fix this? If possible, please be specific as I only have rudimentary knowledge of HTML and CSS. Thanks.
-
@PhilipD - Sorry about that as Bootstrap does tend to overwrite some of the Zendesk CSS when they are named the same. Can you tell me what theme you are on so I can get the line numbers for you. We can override the Bootstrap CSS by simply adding !important like below.
.search input[type=search] {
border-radius: 20px !important;
font-size: 18px !important;
padding: 6px 45px 6px 20px !important;
width: 450px !important;
}Above is and example of what we will need to do and once you let me know the theme, I will post the code for you so you can fix your search bar.
-
Hi Wes, I am using the Humble Squid theme. Appreciate the help. Thanks.
-
@PhillipD - Did you include the Bootstrap CSS file along with JS file. This tip only calls for the JS file which is this one:
<!-- Latest compiled and minified JavaScript --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>From your description it sounds like you also added the CSS file from Bootstrap which is what causing the interference. If you want a fully responsive Help Center then keep this included and we can make a few changes but you may find other interference's along the way. Add the following to your CSS tab:
input, button, select, textarea {
line-height: normal !important;
}Let me know if that puts your search bar back the way it was.
Please sign in to leave a comment.
98 Comments