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
Irene
hi Trapta Singh! We tried to apply the accordion, we have no console errors, but the panel content is not opening, can you help us? thanks
0
Trapta Singh
Hi @Irene,
Is it possible for you to share the link of your HC or some way I can see what went wrong so I can guide you accordingly?
Thanks
0
Mylene
Hello everyone, could you please advise how I can apply collapses with headers to sections?
For example, If I click on a section header, it opens the list of the titles of the articles and then again.
Thank you for your help!
0
Ifra Saqlain
Hi Mylene Issartial,
For which page you want to do this, Home, category or section?
You only need to wrap the section title inside this:
and then wrap all the articles inside the panel:
CSS and JS code are already there, copy and paste as it is.
If any confusion feel free to ask :)
Thanks
0
Mylene
It worked, thank you very much.
Is there a possibility to have a section and then a subsection to have the country and then a subsection per thematic?
For example: Category: Country
Section: Alaska
Sub section: General and then article
Sub section: Alaska adventure and then articles
sub section: Alaska diving and then articles
A the moment I have the below:
Thank you in advance
0
Ifra Saqlain
@Mylene Issartial, just do te same as you did for the category page:
Add accordion to section title and move out section title from the header-
Add panel before the subsections code-
Close this panel after the article code at the bottom-
Test this and let me know :)
1
Irene
hi Trapta Singh! https://ayuda.wallapop.com/hc/es-es
thx in advance
0
Trapta Singh
Hi Irene,
Can you try commenting the code from line no. 219 to 221 in your script.js file? It seems that the same is throwing some error.
Or you can try putting the according script code above this line of code.
Let me know how it goes for you.
Thanks
0
Mylene
Hello Ifra, thank you very much but not sure I did it correctly:
This is what I had :
Then I added the following :
But it does not work and I miss something.
0
Kyla Craig
Hi Zendesk team,
I love these accordions, thank you!
I'm hoping you can help me make them accessible with the keyboard. I've added tabindex=0 to each <div class="accordion">, so they are focusable with the keyboard, but nothing happens when I try to open or close them with the enter key, space bar, etc. They only open and close when clicked with the mouse, but our help center must comply with WCAG 2.1 AA accessibility guidelines, so the accordions must be controllable with the keyboard as well. I believe something has to be edited in the JS, but I'm not knowledgeable enough to figure it out on my own.
Here's one of our help center articles that uses accordions: https://community.environicsanalytics.com/hc/en-us/articles/360029443292
Any advice is appreciated. Thanks!
0
Ifra Saqlain
Hi Kyla Craig,
There are some changes in the code:
JS code in script.js file:
Compare the CSS code:
Update HTML Code:
It will be helpful for you :)
Thanks
0
Ifra Saqlain
Hi Mylene Issartial,
To apply accordion to your subsections on the section page, follow the steps below:
1). Go to your section_page.hbs file.
2). Update the subsection title code as given below.
Now, add the given code below just after the button that you updated above. This code is for showing articles of subsections on the section page.
Add CSS code to your style.css file.
Add script code to your script.js file.
Note: You can update your category page accordion tags and CSS and js code as per the above description, your accordion will work on keypress.
Output:
If any confusion feel free to ask :)
Thanks
1
Kyla Craig
Hi Ifra Saqlain,
Thank you for this! It looks like the accordions are now usable with the keyboard, however they won't open anymore. They display like they're open, but the <div class="panel"> content does not appear. I found this error in the Console:
Do you know how I can fix this?
0
Ifra Saqlain
Hi Kyla Craig,
As I explained above, you must use <button class="accordion">...</button> tag instead of <div class="accordion">.....</div>, otherwise it won't work on keypress.
If you want to solve your first error, your console has a null error because when your page doesn't has any class-name which you use in your script code then code throws error. You can add condition to check the URL string of the page to remove this error.
Thanks
0
Kyla Craig
Hi Ifra Saqlain,
I'm confused because the page has the class name "panel" (3 times) so I don't know why it's not recognizing it. Are you able to tell me how to add a condition to check the URL string of the page?
Also, I have changed it to <button class="accordion">, I just can't publish my changes because it's not working correctly.
Thanks for your help!
0
Ifra Saqlain
@Kyla Craig, that's too simple to make that work.
The code is working, I tested your theme using the dev tool.
Can you share your article page code here or to my mail ID? I want to see what did you do?
0
Mylene
HI Ifra Saqlain, thank you for your help. However, I am not sure how to make it work, not really into coding and learning step by step. Would it be possible to have a quick call?
0
Ifra Saqlain
@Mylene Issartial, Sure.
0
Mylene
Super, please let me know when you can be available :) I am located in the UTC -5 (EST time zone)
0
Elizabeth Barron
I am suddenly having issues where tables are cut off in accordions (this was brought to my attention over the weekend). I've tried resizing and have tried adjusting table attributes in style.css but with no results. Any assistance?
0
Ifra Saqlain
@Elizabeth Barron, you only need to add this style to your table's parent wrapper only.
Credit: https://www.w3schools.com/css/tryit.asp?filename=trycss_table_responsive
Output: A scrollbar will be added to your table.
0
Elizabeth Barron
Thanks Ifra Saqlain. It's a little bizarre that this is happening all of a sudden as these tables have displayed correctly in the past with no scroll bar. Even when I resize the table, it doesn't resize within the accordion. The scrollbar helps for now, but I still feel like there is a bigger issue preventing them from being resized.
0
Ifra Saqlain
@Elizabeth Barron, scrollbar will help you with small (Mobile and Tablet) devices. If I can see your theme I can share my view or solution but you can try decreasing the padding of table cells in CSS.
0
Elizabeth Barron
Ifra Saqlain our Guide is not available to the public, but I'm happy to provide you with any code or other information you might need. I've tried adjusting padding of table cells, but it doesn't seem to have an impact.
0
Ifra Saqlain
@Elizabeth Barron, something is wrong in CSS you can remove all CSS and test. I'm attaching a link of responsve table you should see once:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_table_responsive
0
Alexandra Culler
Hi Ifra Saqlain - thank you so much for the great code! I've implemented it on my site.
I am wondering if it's possible to set it up so that the first accordion in a series is open? I tried to update my HTML so the first item was of the class "accordion active" but all that did was highlight the header without showing the content within the panel.
This is the first time we're using this feature on our site, so I am trying to guide users by having the first accordion open so they know to open the other ones.
Thanks for any guidance you can provide!
0
Alexandra Culler
Jane M Langschied - it works for me (see here). Could it be that the code conflicts with something in your CSS or JS files? If you already have something defined as "accordion" or "panel" in your CSS file, that could cause an error if you try to re-define it later, or try to reference it in the JS file
0
Ifra Saqlain
Hi Max Nason, you can use this accordion source code: https://codepen.io/hedayethm/pen/pqLWdL
Follow the steps below:
i). Add these CDNs to your document_head.hbs file.
ii). Add code to your article > edit > source code.
If any issue feel free to ask :)
Thanks
0
Максим Насон
Hi! Ifra Saqlain
If it is possible to display tab functionality in the copenhagen theme ?
0
Ifra Saqlain
Hi Max Nason,
Credit: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs
Please follow the steps below:
i). Go to your hbs file where your want to add tabs.
ii). Add the given code to that hbs file.
iii). In the given HTML code, there are demo text, remove that and add yours.
iv). After that, open style.css file and add the given CSS code.
v). Open your script.js file and add the given code.
If you face any issue feel free to ask :)
Thanks
0