This guide creates a FAQ expand/collapse javascript question and answer set up whereby when another question is expanded the current open answer is collapsed. So only one is expanded at any point. In the example below click to see how it works.
I have changed it to better work in the WordPress post editor – but can be used in any CMS or web application.
Example 1 – FAQs
Q1. What currency is the course charged in?
Q2. What if the course doesn’t help me?
Q3. When will the webinars take place?
Q4. What is the self-directed mentoring program?
The HTML
In the HTML markup there are 2 key CSS classes accordion and panel, I have used the p tag for the question and it is given the accordion class and the answer is wrapped in a div with the panel class.
The CSS
The .panel class is set to be hidden initially via the opacity and max-height CSS values and is set to show when it is given the .show class via javascript.
The Javascript
Leaving the toggling to the user
If you don’t care about only viewing one panel you can toggle all accordions independently, here the user has the onus to collapse back the panel, just swap the javascript, as below…
Example 2 – FAQs
Q1. What currency is the course charged in?
Q2. What if the course doesn’t help me?
Q3. When will the webinars take place?
Q4. What is the self-directed mentoring program?
Ref
http://stackoverflow.com/questions/37745154/only-open-one-accordion-tab-at-one-time
http://www.w3schools.com/howto/howto_js_accordion.asp
The example I have used, uses different HTML elements than the w3schools example, the reason is more WordPress post editor friendly as the w3schools uses the button element which can get enclosed by a p element in WordPress which then will fail the javascript.
7 comments
Selena
I have added the code step by step and created all the javascript file but the first questions showing twice on my website. What should I do? Can you please help me out as I have tried all the things and follow all of your mentioned steps. This is my site https://mesheble.com/ on which I am implementing your code.
greg
greetings,
i have a issue. i my case i have nested accordion like this:
Q1. What currency is the course charged in?
Q1. What currency is the course charged in?
A. The course is charged in Australian dollars.
Q1. What currency is the course charged in?
A. The course is charged in Australian dollars.
Q1. What currency is the course charged in?
A. The course is charged in Australian dollars.
what’s the code to only target the first level of accordion and not the child?
Abdul Majid
i m also having a same issue .but when i applied this code on new page its worked but on previous work page it not working
K
Hi there,
Using this on a squarespace site.
Sometimes the accordions don’t toggle and just remain closed. I’ve copied and pasted the code as you’ve suggested and refreshing seems to fix it, but wondering if you could help troubleshoot?
Bill
Hi, what if the max-height of the panel is unknown? If I make the height 100% I lose the animation. Is there a better way to fix it for an unknown height (i.e. data from a database that will come in and vary).
Andrew
Hi Neil
I’ve used this on a page of my Squarespace site (I know, not a Word Press site!)
It was working fine but now no – not expanding unless I reload the page
Where is the best place to go for advice?
Andy
Hi Neil,
I’ve just tried this on the Genesis Magazine Pro theme, but with limited success. It all looks good until I click on the link to reveal the answer but nothing appears to happen. Any ideas on why this might be? Thanks.