WPBeginner» Blog» Tutorials» How to Add a jQuery FAQ Accordion in WordPress

How to Add a jQuery FAQ Accordion in WordPress

Last updated on May 19th, 2015 by Editorial Staff

Free WordPress Video Tutorials on YouTube by WPBeginner

How to Add a jQuery FAQ Accordion in WordPress

Recently one of our users asked us if there was a way for them to add a FAQ accordion on their WordPress site. There are many plugins available that allows you to add a frequently asked questions or FAQs section in WordPress. In this article we will show you how to add a jQuery FAQ accordion in your WordPress site.

What is Accordion?

In web design, accordion is a term used for a user interface design pattern that has tabs or content blocks which collapse or expand upon user interaction. Each tab has content below them which expands when the user clicks on the menu item. In simple terms, it is like a menu that expands when you click on it. We have used a similar effect on our free WordPress blog setup page. Below is a screenshot of a sample accordion.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Adding a jQuery FAQ Accordion

Before you can add a jQuery FAQ accordion, you need to make sure that you have a FAQ section. Start with adding a FAQ section by following our tutorial on how to add a FAQ section in WordPress.

Now let’s go ahead with adding the jQuery FAQ accordion. WordPress comes with the jQuery library however it does not have jquery themes. We will load that from Google CDN and queue these scripts in WordPress. We will also create a shortcode that displays our frequently asked questions. Most importantly we will do all that by creating a WordPress plugin.

Create a folder on your desktop and name it my-accordion. Open Notepad or any other text editor of your choice. Create a file called my-accordion.php and paste this code inside it:

<?php
/** 
Plugin Name: WPBeginner's FAQ Accordion
Description: A jQuery powered Accordion for FAQs based on a tutorial by WPBeginner
Version: 1.0
Author: WPBeginner
Author URI: https://www.wpbeginner.com
License: GPL2
*/
function accordion_shortcode() { 

// Registering the scripts and style
wp_register_style('wpb-jquery-ui-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.css', false, null);
wp_enqueue_style('wpb-jquery-ui-style');
wp_register_script('wpb-custom-js', plugins_url('/accordion.js', __FILE__ ), array('jquery-ui-accordion'), '', true);
wp_enqueue_script('wpb-custom-js');

// Getting FAQs from WordPress FAQ Manager plugin's custom post type questions
$posts = get_posts(array(  
'posts_per_page' => 10,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'question',
));
	
// Generating Output 
$faq  .= '<div id="accordion">'; //Open the container
foreach ( $posts as $post ) { // Generate the markup for each Question
$faq .= sprintf(('<h3><a href="">%1$s</a></h3><div>%2$s</div>'),
$post->post_title,
wpautop($post->post_content)
);
}
$faq .= '</div>'; //Close the container
return $faq; //Return the HTML.
}
add_shortcode('faq_accordion', 'accordion_shortcode');

After saving your changes to that file, open a new blank file. Save it as accordion.js. Next paste this code inside it and save the file:

jQuery(document).ready(function() {
jQuery("#accordion").accordion();
})();

Now we have our plugin ready to upload. Open your FTP Client and upload my-accordion folder to /wp-contnt/plugins/ directory in your WordPress website. Next, you need to activate the plugin by going to your plugin’s screen in the WordPress admin area.

Adding a FAQ page with Accordion

To display these FAQs in an accordion format, you need to create a new page. Go to Pages » Add New. Give your page a title, e.g. FAQs and in the page edit area enter this shortcode:

[faq_accordion]

Save and Publish your page, and preview it. You will see your FAQs displayed in a nice accordion menu.

Changing Style and Colors of Your Accordion

For colors and styling this FAQ Accordion uses jQuery UI Themes hosted on Google. It is basically a style sheet, and if you prefer you can download and put it on your own website. jQuery website has a jQuery UI themes section with a few ready to use themes. As you can see that we have used the humanity theme in our plugin. You can replace it with any of the available themes such as smoothness, cupertino, etc. You can also create or modify these themes on Themeroller.

jQuery UI Themes