Recent searches
No recent searches
Tip: Collapsible headers in articles or templates (accordions)
Posted Aug 18, 2021
The original tip was posted by Wes. I am simply updating the tip to make it work with the current theme version.
Let gets started without any further delay.
Demo: https://moderatortrapta.zendesk.com/hc/en-us
Step 1: Add the below code (HTML CODE SNIPPET) to the source code of your article.
<div class="accordion">
<p>Section 1</p>
</div>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
Click OK to save the progress.
NOTE: You can copy and paste the same snippet to add as many accordions as you want.
Step 2: Edit your theme to add the below code at the bottom of your style.css file
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-bottom: 10px;
}
.accordion p {
display: inline;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
Step 3: Edit your theme to add the below code at the bottom of your script.js file
document.addEventListener('DOMContentLoaded', function() {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
});
Save and publish the changes.
YOU CAN USE THE ABOVE CODE TO ADD ACCORDION ANYWHERE THROUGHOUT THE THEME. YOU NEED TO PASTE THE HTML CODE SNIPPET (IN STEP 1) IN RESPECTIVE TEMPLATES WHERE IF YOU WANT TO ADD IT ANYWHERE OTHER THAN THE ARTICLE TEMPLATE.
Let us know if you face any issues.
Thank you @... for figuring out the issues in the tip and providing the fix for the same.
Thanks
6
136 comments
Salim Moumouni
Hi Ifra Saqlain
I would want the accordion to open up to the specific place I link a customer to or if a customer searches something and the answer is in one of the accordion I would like it to open it automatically after they click on their search results.
Second to that Im trying to update the colour block of the accordion so that its not white.
1
Carrie Boogaart
Hello! I am using the code exactly as listed above, it's working beautifully. Thank you.
Question - Is there any way to automatically close an open accordion when you click to open another one? So only one accordion is open at a time? Some of our articles have a lot of content in each accordion, and we would love it if when they click on another accordion that the previous open accordion closes. Is this possible?
0
Salim Moumouni
Are there any plans to have accordions in the web widget?
0
Dave Dyson
Not that I'm aware of. See Web Widget/Help Center : Is there anyway to have the accordions persist in the web widget?, and if you're interested in this being added, then for best visibility to our product team I'd suggest posting to our Feedback - Ticketing System (Support) community topic, using this template to format your feedback. Thanks!
0
Ifra Saqlain
Hey Carrie Boogaart,
Do the following steps:
I). Add a parent wrapper to your accordion HTML code.
II). CSS code would be the same as given above.
III). Remove the JS code which you have added and copy-paste the given code.
Test well and let me know :)
Thanks
Team
0
Ifra Saqlain
@Salim Moumouni, did you get the solution to your query:-
1
Carrie Boogaart
Ifra Saqlain That worked amazingly! THANK YOU.
1
Ifra Saqlain
Great :)
0
Nick Lane
Hello Ifra Saqlain and Trapta Singh - I noticed a question by Elizabeth Barron and had the same:
Essentially the same functionality that can be seen in the FAQ of Argos:
https://www.argos.co.uk/help/delivery-and-collection
Is there a way to do this with the code you have supplied/update it to make this work?
Forgive my naiveness - I'm not super codey and have been landed/given the job of making our Zendesk/articles look better!
Any help would be greatly appreciated!
0
Ifra Saqlain
Hi Nick Lane,
Follow the steps below:
I). Copy and paste it to your source while creating article.
II). Copy and paste it to your script.js file at the bottom area.
III). Copy and paste it to your style.css file at the bottom.
Output: Auto close when next is clicked.
When you done, test it. If any issue, feel free to ask :)
Thanks
1
Nick Lane
Thank you so much for your help Ifra Saqlain - that's absolutely amazing and our Zendesk Guide is already looking ALOT better! I'll have a play around over the coming weeks with the style sheet etc. but it's working amazingly well already! Thanks so much!
0
Ifra Saqlain
:)
0
Elizabeth Barron
Ifra Saqlain I'm trying the last code you shared for collapsing previous accordion when next is clicked. if I add your code, removing all previous code in script.js, the accordions do not work at all. If I keep this line of code from the original script.js in the post but also add your code, the accordions work but do not collapse when the next is active. I've added the <div class="accordion-div"> to the top of the article and </div> at the bottom as well in this.
help? I'll add screenshots of script.js. The style.css is the same.
0
Ifra Saqlain
Hello Elizabeth Barron, that should work, okay create a new demo article .
I). Remove previously added script code and CSS code.
II). Create a new demo article, same I mentioned above.
III). Hope that's worked for you, if not then please let me know :)
0
Eva Ž.
We've done everything as per instructions, but the accordions don't seem to open/show text. Could you advise?
0
Ifra Saqlain
Hi Eva Živanović, can you please share your HC URL here? That's working for me. May be your script file has any bug, you can check your console in the dev tool.
0
Eva Ž.
Ifra Saqlain https://customerservice.ekwb.com/hc/en-us
0
Ifra Saqlain
Hello Eva Živanović, I tried it, I added the html code, CSS and script code via dev tool and it's working.
You need to create an article and add the code as I mentioned above and then let me know :)
Thanks
0
Eimear Brady
Hey guys, some really interesting info in this thread.
I have built out my accordions and am hoping to use nested accordions and have some code for it already written out and implemented. It looks pretty good but the nested accordion content is not scrollable. Can someone help / see what I am missing to allow the nested content to be scrollable so I can scroll down and read the content?
Any help would be greatly appreciated!
style.css
script.js
Source code of article content;
0
Ifra Saqlain
Hi Eimear Brady,
Add the code to your style.css file.
After adding this, you can see a scrollbar in your panel.
Thanks
0
Eimear Brady
Ifra Saqlain thank you very much that worked!
0
Brett Bowser
Is there any Guide theme customization question that Ifra Saqlain can't handle??? You're awesome Ifra!!!
1
Ifra Saqlain
Oh,
Thank you, Brett :)
0
Manraj Singh
Hi! I had a question about how these might be read through a screen reader? I realize that all screen readers are different but what would typically be understood when the screen reader comes across a collapsed header, and then an open header?
0
Ifra Saqlain
Hi Manraj Singh :), if you want that the code can be readable via screen reader then rewrite code with the aria-expanded, aria-label, aria-control, role, panel IDs.
+1 for your query.
If you have another query feel free to ask.
Thanks
1
Joe
Hello,
I'm trying to test this out on the copenhagen theme using the ZAT preview, however the accordians never open. When I click, nothing on the console shows up to indicate an error.
There is a CORS error, however I believe that just has to do with the fact i'm using the ZAT preview.
I copied the original code on this post. Any help will be greatly appreciated.
0
Ifra Saqlain
Hi Yusof Yaghi, just copy and paste the code with all the instructions as mentioned above then test on preview mode without using ZAT and then any bug occurs, feel free to share :), also you can share the URL of your HC so I can figure out.
Thanks
0
Joe
Hi Ifra,
I ended up enabling jquery and got an accordion working with that. I will try to give this a shot soon again and will update you with any info I get.
0
Ifra Saqlain
Hi Yusof Yaghi, can you share the URL of your HC here? I want to see the issue.
If you don't wanna share publicly then share on my mail ID.
0
Alyssa
Hi Ifra Saqlain,
What an incredible thread! I've gotten my accordions up and running, however, it's not mobile-responsive. I've racked my brain and reviewed everything I can, but I just can't seem to get the accordions to show up for a screen smaller than 1024 px wide. Any help would be very much appreciated.
I'm also interested in what Salim Moumouni asked about: Is it possible to create an anchor link for the header that also expands the panel? For example, I'm using collapsible headers in articles. I want to create a table of contents at the top of the article that links to each collapsible header. When the reader clicks on a link, I want them to be taken to the section with the panel expanded. Hope that makes sense!
1