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
Максим Насон
Hi Ifra Saqlain
Hi
Why is it that when I try to add code to an article, instead of a class with buttons, the code just changes to a space like on the screenshot?![](/hc/user_images/01HJG6BNN0XTS84PVC9ED8QXSB.png)
0
Ifra Saqlain
Hi Max Nason, I tried it and it's working fine.
I opened the source code for the article and pasted the code:
Please check the security setting,
Guide > Setting > Guide Setting > Security > Check the checkbox 'Display Unsafe content' > Save
Please do the setting and if you face any issues let me know, and I'll fix that.
0
Kyla Craig
Hi Ifra Saqlain,
Thank you for all your help with my accordions a few months ago, I got them working for signed-in users, but when users view our help center without signing in, the accordions don't work. They don't open.
Here is an example: https://community.environicsanalytics.com/hc/en-us/articles/360029443292-MobileScapes-Data-Extract-Glossary
Any idea why they would only be working when users are signed-in to the help center?
0
Ifra Saqlain
Hi Kyla,
Please wrap your code inside this condition
If you are not sign-in code will not be able to find the avatar so it will throw an error. Try the given solution and let me know for further query :)
Thanks
1
Kyla Craig
Thank you Ifra Saqlain, it worked!
0
Colleen Huck
Ifra Saqlain this is incredibly helpful - thank you!
Just wondering, is it possible to adjust the code so all the accordions are expanded by default as opposed to minimized by default?
0
Ifra Saqlain
Hey Colleen,
Use this CSS code instead of the previous one:
Use this script code instead of the previous one:
Try this and if any confusion feel free to ask :)
Thanks
0
Marco muñoz
Is it possible to insert a content block inside an accordion?
1
Customer Service
Marco, I have not found a way around this yet. I just came here to find out as well. I'm hoping someone is able to answer. I've been incorporating accordions into our knowledge articles, however, I'm unable to put a content block into an accordion. When I have a content block in an article, the source code is gone either on top of the content block or the bottom, wherever my curser is set to. Does anyone know if there's a way around this?
0
Ronja Sindek
Hi, we have implemented the accordions and they work well. But our support often has to sent links to article content / also to content in accordions and we want, that the customer gets allready the open accordion. Is this possible? Can we sent links with the “instruction” to open the accordion directly? Thank you.
0
Ifra Saqlain
Hi Ronja Sindek,
Do you need an accordion that's open by default?
0
Ronja Sindek
Hi Ifra, no not by default. The accordion should open, if the customer uses the link to the accordion.
For your information: We use instead of the <p> element, <h3> element, for getting a link to the accordion element. But then, the customer has to click again, to get the information, and this is not so pretty.
0
Kyla Craig
My query is the same as Ronja Sindek's. Can our Support team share a link to one specific accordion in the article, and is there a way for the relevant accordion to appear expanded?
0
Ifra Saqlain
Hi Ronja Sindek and Kyla Craig,
Please review this article and let me know if it matches your query.
https://support.zendesk.com/hc/en-us/community/posts/7452498225818-Add-Accordion-based-on-Table-Of-Content
0
Debs Teru
Hello, would it be possible to add images under each accordion instead of text. For example, the agent clicks the plus sign to expand the accordion and they see step by step guide with screenshots of what to click.
Thank you
0
Brett Bowser
Debs Teru you should be able to use HTML to add images within the accordion so you can share screenshots. You would just need to add your <img> tags within <div class="panel"> </div> I believe.
Hope this helps!
0