Tip: Collapsible headers in articles or templates (accordions)
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
-
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.
.accordion-div { width: 70%; }
@media(min-width:1024px){
.accordion-div { width: 100%; }
}
Screenshot:
Note: width can be 80%, 50%, 75%, ...
min-width:1024px - can be 768px or any ....Or if you are facing any issue with your theme then share screenshot to get exact solution.
-
@Alyssa, for your second query:
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!
Yes, it's possible.
Create TOC for your articles, add code for the accordions, and then add the accordion panel ID to TOC links:
Accordion Panel
<p id="accordion-panel-one">Lorem ipsum dolet amet...</p>
TOC Link
<a href="#accordion-panel-one">TOC Link One</a>Try this once :)
Thank You
Team
-
Ifra Saqlain Thanks for all of your helpful replies in this thread.
Once you collapse a header, the "-" isn't reverting back to "+". Thoughts?
-
Update the script.js file code:
Current Code:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
let active = document.querySelectorAll(".accordion-div .accordion.active");
for(let j = 0; j < active.length; j++){
active[j].classList.remove("active");
active[j].nextElementSibling.style.maxHeight = null;
}
this.classList.toggle("active");
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}Updated Code:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
this.classList.toggle("active");
panel.style.maxHeight = null;
} else {
let active = document.querySelectorAll(".accordion-div .accordion.active");
for(let j = 0; j < active.length; j++){
active[j].classList.remove("active");
active[j].nextElementSibling.style.maxHeight = null;
}
this.classList.toggle("active");
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
Screenshot for the same:
-
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?
-
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:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
this.classList.toggle("active");
} else {
let active = document.querySelectorAll(".accordion-div .accordion.active");
for(let j = 0; j < active.length; j++){
active[j].classList.remove("active");
active[j].nextElementSibling.style.maxHeight = null;
}
this.classList.toggle("active");
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}And here's the snippet from the article's source code:
<div class="callout">
If you need help deleting your account, please visit this guide:
<a href="/hc/en-us/articles" target="_blank" rel="noopener">Delete my account</a>
</div>
<ul>
<li>
<a href="#desktop">I'm on a desktop device</a>
</li>
<li>I'm using the app</li>
<li>I'm using the mobile web</li>
<li>Frequently asked questions </li>
</ul>
<div class="accordion">
<h2>How to cancel on desktop</h2>
</div>
<div id="desktop" class="panel">
<ol>
<li>
<strong><span style="font-weight: 400;">Click the </span>Settings<span style="font-weight: 400;"> link from the left sidebar navigation</span></strong>
</li> -
Hey Alyssa,
Follow the below steps to get the open accordion panel after clicking on TOC link:-
i). HTML -
<h2 class="accordion">Section One</h2>
<div id="panel-one" class="panel" style="">
<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>
<h2 class="accordion">Section Two</h2>
<div id="panel-two" 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>
<h2 class="accordion active">Section Three</h2>
<div id="panel-three" class="panel" style="">
<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>
<h2 class="accordion">Section Four</h2>
<div id="panel-four" 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>ii). JS code -
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
this.classList.toggle("active");
panel.style.maxHeight = null;
} else {
let active = document.querySelectorAll(".accordion-div .accordion.active");
for(let j = 0; j < active.length; j++) {
active[j].classList.remove("active");
active[j].nextElementSibling.style.maxHeight = null;
}
this.classList.toggle("active");
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
var _w = $('li > a[href="#panel-one"]');
var _x = $('li > a[href="#panel-two"]');
var _y = $('li > a[href="#panel-three"]');
var _z = $('li > a[href="#panel-four"]');
$(_w).click(function() {
$("#panel-one").css("maxHeight","100%");
})
$(_x).click(function() {
$("#panel-two").css("maxHeight","100%");
})
$(_y).click(function() {
$("#panel-three").css("maxHeight","100%");
})
$(_z).click(function() {
$("#panel-four").css("maxHeight","100%");
})
});iii). Add this TOC links to article page not for all articles, only for that for which you added accordion.
article_page.hbs
{{#is article.id 1111111111}}
<ul id="tocc">
<li>
<a href="#panel-one">Section One</a>
</li>
<li>
<a href="#panel-two">Section Two</a>
</li>
<li>
<a href="#panel-three">Section Three</a>
</li>
<li>
<a href="#panel-four">Section Four</a>
</li>
</ul>
{{/is}}
Note: Remove this given article id 1111111111 and add you article id where you added accordion.
Screenshot for the same:
Thanks
Team Diziana
-
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:
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 12px;
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;
}
.accordion-div { width: 90%; }
@media(min-width:1024px){
.accordion-div { width: 100%; }
}script.js:
document.addEventListener('DOMContentLoaded', function() {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
this.classList.toggle("active");
panel.style.maxHeight = null;
} else {
let active = document.querySelectorAll(".accordion-div .accordion.active");
for(let j = 0; j < active.length; j++){
active[j].classList.remove("active");
active[j].nextElementSibling.style.maxHeight = null;
}
this.classList.toggle("active");
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
}); -
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.
-
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!
-
@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:
<h2 class="accordion">Section One</h2>
<div id="panel-one" class="panel" style="">
<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>
<h2 class="accordion">Section Two</h2>
<div id="panel-two" 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>
<h2 class="accordion active">Section Three</h2>
<div id="panel-three" class="panel" style="">
<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>
<h2 class="accordion">Section Four</h2>
<div id="panel-four" 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>script.js code, add it to the bottom of the file:
document.addEventListener('DOMContentLoaded', function() {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
this.classList.toggle("active");
panel.style.maxHeight = null;
} else {
let active = document.querySelectorAll(".accordion-div .accordion.active");
for(let j = 0; j < active.length; j++){
active[j].classList.remove("active");
active[j].nextElementSibling.style.maxHeight = null;
}
this.classList.toggle("active");
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
});style.css file code:
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 12px;
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;
}
.accordion-div { width: 90%; }
@media(min-width:1024px){
.accordion-div { width: 100%; }
} -
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. -
Happy to help :)
-
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. -
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.
-
script.js:473 Uncaught SyntaxError: Unexpected token 'export'
-
No problem, did you add JS code to the scripr.js file in your live theme?
-
The only code I have added to the script.js file is
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";
}
});
}
});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? -
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 :
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";
}
});
}
});style.css file has :
.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;
}article has this HTML code in source:
<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> -
Hi Ifra.
This is exactly what I have done and the accordion won't expand when clicked. -
No problem, share your HC public URL and set your working theme live then I can see the issue.
-
Hey Jason,
I saw an error in the console,
Uncaught SyntaxError: Unexpected token 'export' (....
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.
-
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
<div class="accordion-div">
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):
<div class="accordion">
<p>Section 1</p>
</div>
<div class="panel">
<div class="accordion-div">
<div class="accordion">
<p>Sub-section</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>
</div>Looking forward how to solve this in content blocks. Thanks for letting me know.
Regards,
Naud
-
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!
-
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?
-
Can anyone advise if this is accessibility/WCAG-compliant?
-
Hey Josh Keller, if you consider WCAG then you can use the HTML5 for accordion:
<details>
<summary>
Section 1
</summary>
<p>Click on the "Try it Yourself" button to see how it works.</p>
</details>
<details>
<summary>
Section 2
</summary>
<p>Click on the "Try it Yourself" button to see how it works.</p>
</details>
<details>
<summary>
Section 3
</summary>
<p>Click on the "Try it Yourself" button to see how it works.</p>
</details>OR
Please go through with this article:
http://web-accessibility.carnegiemuseums.org/code/accordions/
If any query feel free to ask :)
-
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.
.accordion:after {
/*** content: '\002B'; plus ***/
font-family: FontAwesome;
content: '\f078'; /*** chevron ***/
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
/*** content: "\2212"; minus ***/
font-family: FontAwesome;
content: "\f077"; /*** chevron ***/
}
-
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?
Hi Tony Jansson,
Yes, it is possible. In order to achieve what you want, you need to tweak code a little bit to make it work accordingly.
I would like to have my sections appearing as accordions and then when selecting a specific section, the articles appear.
Thank you
Please sign in to leave a comment.
116 Comments