Create a Expand/Collapse FAQ Accordion, Collapse other on Click

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?

A. The course is charged in Australian dollars.

Q2. What if the course doesn’t help me?

A. If it doesn’t help you I’ll refund the purchase price in full.

Q3. When will the webinars take place?

A. Depending on the mix of countries and time zones for people attending the webinars, I will pick a time that works best for most participants. All webinars will be recorded so you can listen to them again. The private Facebook group will obviously be available 24/7 and I’ll be monitoring and contributing to the discussion regularly.

Q4. What is the self-directed mentoring program?

A. The self-directed mentoring program is designed to help you set-up and run an effective mentee-mentor relationship as part of the course.

The HTML

<h3>FAQs</h3>
<p class="accordion">Q1. What currency is the course charged in?</p>
<div class="panel">A. The course is charged in Australian dollars.</div>
<p class="accordion">Q2. What if the course doesn’t help me?</p>
<div class="panel">A. If it doesn't help you I'll refund the purchase price in full.</div>
<p class="accordion">Q3. When will the webinars take place?</p>
<div class="panel">A. Depending on the mix of countries and time zones for people attending the webinars, I will pick a time that works best for most participants. All webinars will be recorded so you can listen to them again. The private Facebook group will obviously be available 24/7 and I’ll be monitoring and contributing to the discussion regularly.</div>
<p class="accordion">Q4. What is the self-directed mentoring program?</p>
<div class="panel">A. The self-directed mentoring program is designed to help you set-up and run an effective mentee-mentor relationship as part of the course.</div>
view raw faq.html hosted with ❤ by GitHub

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

<style>
/* Style the element that is used to open and close the accordion class */
p.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
margin-bottom:10px;
}
/* Add a background color to the accordion if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
p.accordion.active, p.accordion:hover {
background-color: #ddd;
}
/* Unicode character for "plus" sign (+) */
p.accordion:after {
content: '\2795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
/* Unicode character for "minus" sign (-) */
p.accordion.active:after {
content: "\2796";
}
/* Style the element that is used for the panel class */
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
margin-bottom:10px;
}
div.panel.show {
opacity: 1;
max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}
</style>
view raw faq.css hosted with ❤ by GitHub

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

// this one toggles only one open at a time
// Ref - http://stackoverflow.com/questions/37745154/only-open-one-accordion-tab-at-one-time
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses) {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
}
function setClass(els, className, fnName) {
for (var i = 0; i < els.length; i++) {
els[i].classList[fnName](className);
}
}
});
</script>
view raw faq.js hosted with ❤ by GitHub

 

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…

// this toggles each question independently
// ref - http://www.w3schools.com/howto/howto_js_accordion.asp
<script>
/* Toggle between adding and removing the "active" and "show" classes when the user clicks on one of the "Section" buttons. The "active" class is used to add a background color to the current button when its belonging panel is open. The "show" class is used to open the specific accordion panel */
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
};
}
</script>
view raw faq-js1.js hosted with ❤ by GitHub

Example 2 – FAQs

Q1. What currency is the course charged in?

A. The course is charged in Australian dollars.

Q2. What if the course doesn’t help me?

A. If it doesn’t help you I’ll refund the purchase price in full.

Q3. When will the webinars take place?

A. Depending on the mix of countries and time zones for people attending the webinars, I will pick a time that works best for most participants. All webinars will be recorded so you can listen to them again. The private Facebook group will obviously be available 24/7 and I’ll be monitoring and contributing to the discussion regularly.

Q4. What is the self-directed mentoring program?

A. The self-directed mentoring program is designed to help you set-up and run an effective mentee-mentor relationship as part of the course.

 

 

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.

5 Comments

  1. greg on February 27, 2019 at 1:36 pm

    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?

  2. K on October 17, 2018 at 2:36 pm

    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?

  3. Bill on July 18, 2018 at 7:57 pm

    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).

  4. Andrew on January 26, 2018 at 3:33 am

    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?

  5. Andy on December 27, 2016 at 11:52 am

    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.

Leave a Comment