Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add a jQuery FAQ Accordion in WordPress

Last updated on by
Follow WPBeginner on YouTube
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.

An accordion menu for FAQs

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: http://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

We hope this article helped you add a jQuery FAQ Accordion on your WordPress website. For feedback and questions please leave a comment below.


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. WPBeginner Staff says:

    The code screenshot you shared, does not look like the code we have shared above. However, the code in screenshot has HTML tags that shouldn’t be there. It should be like this:

    ‘posts_per_page’ => ’10’,

    • Stefan 13 says:

      This is pretty weird. Your comments had me baffled, as I was clearly seeing the code right there on my screen. I then realised that all those currency converter tags came from another one of my Firefox plugins, which dynamically adds a context menu to numbers in web pages – hence the source looked different.
      Thanks for your help!

  2. Stefan 13 says:

    When I try to activate the plugin in WP 4.1, I get this error message:

    Plugin could not be activated because it triggered a fatal error.

    Parse error: syntax error, unexpected ‘<' in /home2/laurepc3/public_html/shala/wp-content/plugins/my-accordion/my-accordion.php on line 20

    Any ideas that may help with this?

    • WPBeginner Staff says:

      The code you pasted has an unexpected character 10,

      Make sure posts_per_page is enclosed in single quotes. Make sure there is an equals sign before greater than sign and make sure there is a comma at the end of the line.

      • Guest says:

        I don’t have that on line 20. What I can see on line 20 in the post above and in my file is this:

        ‘posts_per_page’ => 10,
        Screen shot attached as well.
        So does the post above display incorrect file content?

      • Stefan 13 says:

        The code in my file does not look like what you posted for line 20, but it’s the same code as is above:

        ‘posts_per_page’ => 10,
        ‘orderby’ => ‘menu_order’,

        Does that mean that the code in the article is out-of-date?
        Thanks for clarifying!

        Screen shot attached:

  3. Caroline says:

    Thank you for this tutorial! It’s really help with my problem!

    I want to put topics like this: Topic “Events”: a accordion box and “Past Events”: another accordion box with topic Past Events. I tried the shortcode [faq_accordion + topic=”events”] but nothing happened. What can I do? Thank you very much!!!

  4. raouf says:

    hello .. thank you for this tutorial, it’s helpful . but i just make a simple modification to make a accordion for a specific category . it worke’s but it show me the classic editor of my post not the visual editor. can you help me

  5. Mahesh Waghmare says:

    Thanks…

  6. Rana says:

    Hi
    Is there a way I can just dispay the “category title i.e FAQ Topic ” and the topic listed under each.
    I dont want the whole content,just the category title and clicking on it would show the topic title )

    Raba

  7. Chris says:

    What’s the best way of getting the CSS to work? I have a child theme with my custom css code. Do I need to do anything in that file since I don’t see any of the Google css.

    • WPBeginner Support says:

      Chris the Google CSS is queued and only fetched when your FAQ accordion is displayed. Open the page containing your FAQ Accordion and right click then select View Source. On the view source page look for http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.css if it is there then this means you have successfully loaded CSS theme.

  8. Chris S. says:

    I am able to get your plugin to work properly with the FAQ Manager but had some questions. It will only display 10 of the FAQs (which I presume is a default #). If I use the built-in shortcode that comes with the FAQ Manager plugin I am able to get the full list to display

    To display ALL: place [faq limit=”-1″] on a post / page

    Do you have any suggestions on how to handle this?

    Also, the FAQ manager allows for creating different lists by topic. Would there be a simple way to modify your plugin to make use of this?

    List all from a single FAQ topic category: place [faq faq_topic=”topic-slug”] on a post / page

    Great work otherwise!

    • WPBeginner Support says:

      To display FAQs with topics FAQ Manager uses these parameters in the shortcode:

      [faq faq_topic="topic-slug"]

      [faq limit=”-1″] is quite self explanatory. It will display all FAQ.

      However, if you want to display more FAQ’s in the accordion you need to modify the query parameter in WPBeginner’s FAQ Accordion plugin, like this:

      // Getting FAQs from WordPress FAQ Manager plugin's custom post type questions
      $posts = get_posts(array( 
      
      // Increase posts per page
      'posts_per_page' => 50, 
      
      // Get only FAQs under a specific topic
      // faq-topic is a taxonomy 
      //topic-name is the name of topic you want to display
      
      'faq-topic' => 'topic-name',
      'orderby' => 'menu_order',
      'order' => 'ASC',
      'post_type' => 'question',
      )); 
      
  9. Garrett says:

    This isn’t working for me quite as intended. Plugin activates successfully and the shortcode is being processed, but here’s what the output looks like…

    I opted to use the FAQ manager plugin with your code in order to fix the hideous styling the plugin spits out.

    But when it’s all said and done, here’s what it looks like. Any tips?
    http://screencast.com/t/K2VfuBOptcn

    Many thanks in advance!!
    ~Garrett
    Atlanta, GA

    • Garrett says:

      It seems the list is not inheriting any styling info from jquery-ui.css, though I did verify that a link file to jquery-ui.css IS present on the page.

      Line where jquery-ui.css is included:
      Exploring CSS rules:

      How can this be?

      Thank you!
      ~Garrett

  10. Richard Morrison says:

    This has broken following the latest WordPress Update. I can no longer get the accordion to display. Shortcode now only displays the text from FAQ manager.

  11. Piet says:

    line 20 of your my-accordion.php file reads: ‘numberposts’

    that function has been deprecated since…. a very long time.

    as you guys are in the business of giving tutorials to beginners, can you at least get the functions right?

    obviously this should be ‘posts_per_page’

  12. Mary-Anne says:

    I would appreciate some help with this. I am attempting to install on a 3.5.2 on a network site. Network Admin has the Plugin listed and Network Activated.

    However it is not listed in the sub-sites.

    Has this been tested with Network sites yet? It looks like just what is needed. Thanks for all your efforts with WPBEGINNER.

    Thanks.

  13. birge says:

    Hi,
    I made my-accordion.php and accordion.js, uploaded them and everything, but still I can’t see the plugin in the list of plugins. What went wrong?
    Thanks,
    birge

  14. alin says:

    I do just what you said but I can’t activate the plugin from plugins dashboard because I can’t se it :)

  15. curdaneta says:

    You forgot include the script file “accordion.js” …

    • Editorial Staff says:

      We shared the accordion.js code in there. It is also being included using enqueue script.

  16. curdaneta says:

    Hello
    It doesn’t work for me using the shortcode in several paragraph
    Regards
    curdaneta

  17. Gaelyn says:

    Thanks. I can see where this will come in very handy.

  18. Drake says:

    Thank you for the article. It would be nice have a similar one that explain how to introduce jQuery tabs to pages/posts.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.