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

June 30, 2016 -

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.

Related Posts:

Categorized Javascript/jQuery Tagged ,