Skip to content

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

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?

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.

6 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?

    • Abdul Majid on May 28, 2019 at 6:16 am

      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

  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





Scroll To Top