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
Ifra Saqlain
Hi Alyssa :),
I just checked the accordions on all screens -
380px:
768px:
1024px:
You can adjust the width of accordion wrapper using the class name, add code to your style.css file.
Or if you are facing any issue with your theme then share screenshot to get exact solution.
0
Ifra Saqlain
@Alyssa, for your second query:
Yes, it's possible.
Create TOC for your articles, add code for the accordions, and then add the accordion panel ID to TOC links:
Try this once :)
Thank You
Team
0
Sunny Tripathi
Ifra Saqlain Thanks for all of your helpful replies in this thread.
Once you collapse a header, the "-" isn't reverting back to "+". Thoughts?
0
Ifra Saqlain
Sunny Tripathi,
Update the script.js file code:
Current Code:
Updated Code:
0
Kristin Lisson
I've added all of the code and (including the script.js). I see the panels in my article preview, but nothing will expand. There are no errors in my console. Any troubleshooting tips I can try?
1
Alyssa
Hi Ifra Saqlain,
Thank you for all of your help!
I was able to get the headers to be mobile-responsive. I tried your suggestion of adding an id to the panel, and the link in the TOC leads to the area of the panel, however it doesn't expand (show) it. It still seems to be hidden.
Here is the script.js that I'm using:
And here's the snippet from the article's source code:
0
Ifra Saqlain
Hey Alyssa,
Follow the below steps to get the open accordion panel after clicking on TOC link:-
i). HTML -
ii). JS code -
iii). Add this TOC links to article page not for all articles, only for that for which you added accordion.
article_page.hbs
Thanks
Team Diziana
0
Elizabeth Barron
I just switched to Copenhagen v2 theme and copied over the style.css and script.js additions from here for accordions (which worked so well in v1) but now they won't expand. Help?
style.css:
script.js:
0
Ifra Saqlain
Hi Elizabeth Barron, I just tried the code you provided above in the latest Copenhagen Theme and accordion is working fine, can you share the URL of your HC? I think there is something missing or any kind of issue in the console, you can check in your console as well.
0
Elizabeth Barron
Ifra Saqlain our HC isn't public, so I'm not sure the URL will be of use. Can you tell me what to look for? Or what additional information I can provide you?
Also, for context, I just downloaded the Copenhagen v2 and was adding the script.js and style.css info from above and testing in "preview." I made the new theme "live" and still had issues, so I switched back to our legacy theme.
Thanks!
0
Ifra Saqlain
@Elizabeth Barron, do just one thing, go the preview mode of your theme > right click > click on "inspect" in the list > go to "console" tab > is there any red color issue. If yes, copy that and share.
Points:
HTML for article source code:
script.js code, add it to the bottom of the file:
style.css file code:
0
Elizabeth Barron
Ifra Saqlain I created a test article with the html you provided and ensured the code in my style.css and script.js were the same as above.
I opened "inspect" and Console and saw "Uncaught SyntaxError: Unexpected end of input at script.js:498"
I went to github and got the copenhagen v2 script.js file from there and copied/pasted, then added the accordion js above to the bottom and it worked fine. Not sure what the issue with the static script.js was, but we seem to be ok now.
Thank you for your help! Knowledge of the Inspect > Console portion will be helpful in the future for troubleshooting as well.
0
Ifra Saqlain
Happy to help :)
0
Jason McDonald
Hello.
I've added the code Trapta provided at the beginning of the thread and this works perfectly in our sandbox HC.
When I tried doing it on our live environment it's not working. The accordion is here but clicking on it does not expand it.
0
Ifra Saqlain
Hii Jason Mcdonald,
Please check the console tab in your inspect tool, if there is any issue, copy that and paste it here so I can share some solution.
0
Jason McDonald
script.js:473 Uncaught SyntaxError: Unexpected token 'export'
0
Ifra Saqlain
No problem, did you add JS code to the scripr.js file in your live theme?
0
Jason McDonald
The only code I have added to the script.js file is
We have multiple HC's for different brands and there's different content writers so I'm not sure what modifications have been made to this particular theme. As I said the accordion is working in other HC's we have.
Is there anyway to find out which part of the theme code is affecting this?
0
Ifra Saqlain
Hi Jason Mcdonald,
Your live theme must have script code of accordion and CSS code of accordion and your article must have HTML of accordion then your accordion will worked fine.
Please make sure that script.js file has :
style.css file has :
article has this HTML code in source:
0
Jason McDonald
Hi Ifra.
This is exactly what I have done and the accordion won't expand when clicked.
0
Ifra Saqlain
No problem, share your HC public URL and set your working theme live then I can see the issue.
0
Jason McDonald
https://help.sidestepstore.com/hc/en-gb/articles/13205984542225
0
Ifra Saqlain
Hey Jason,
I saw an error in the console,
Resolve this,
See this article: https://codedamn.com/news/javascript/how-to-fix-syntaxerror-unexpected-token-export-in-javascript
your accordion will work.
OR
Move accordion script code bottom to top on script.js file and then test.
0
Naud Janssen
Hi team,
Everything is working as expected in the normal "article builder" but when I try to add code inside of the "content blocks builder" there are some difficulties:
When I try to add the following code, it is automatically deleted after hitting the save button
When I try to add "sub-headers" a </div> is automatically added after hitting the save button while this is not expected because otherwise the sub-header is not visible. Example code (that is working as expected in article builder, but not in content blocks):
Looking forward how to solve this in content blocks. Thanks for letting me know.
Regards,
Naud
0
Greg Katechis
Hi Naud! The issue here is that we only allow class names to be applied to the top-level divs at the moment. This is documented in an article that we have archived for some reason, but we are working on publishing a more robust article in the near future. Apologies for the headaches on that one, as non-documented product limitations are really frustrating.
Let us know if you have any other questions!
0
Alice SMITH
Hello,
I have the accordion set up and it works great in Guide, but how do I get these to work in the Knowledge Capture app?
1
Josh Keller
Can anyone advise if this is accessibility/WCAG-compliant?
0
Ifra Saqlain
Hey Josh Keller, if you consider WCAG then you can use the HTML5 for accordion:
OR
Please go through with this article:
http://web-accessibility.carnegiemuseums.org/code/accordions/
If any query feel free to ask :)
1
Kyle Kowalsky
Pulkit Pandey,
Is there any additional config to make those Font Awesome chevrons work? I changed the style.css code to match yours, but all I get is a unicode placeholder. I'm just using the Copenhagen theme and editing that.
EDIT: Found my answer on another thread. Before the content line, add font-family: FontAwesome; I've updated the code below to reflect this.
0
Mylene
Hello Trapta,
Hope you are well.
In regards to your reply as per below, could you please be a bit more specific on what to do to tric the code a little please?
I would like to have my sections appearing as accordions and then when selecting a specific section, the articles appear.
Thank you
0