Organizing content with an FAQ accordion can improve the user experience on your WordPress site. This feature allows you to display questions and answers in a compact format, making it easier for visitors to find information quickly.
Plus, using jQuery for your accordion makes your FAQs interactive and easy to navigate.
At WPBeginner, we have been running a blog for over 16 years and have written hundreds of articles, guides, and tutorials. In some of these, you will notice we’ve used jQuery FAQ accordions to address common questions from our readers.
This approach has helped us attract more visitors, improve our search rankings, and even generate leads. To sum it up, we know just how valuable a dynamic FAQ accordion can be.
In this article, we will show you how to easily add a jQuery FAQ accordion in WordPress, step by step.
Why Use a jQuery FAQ Accordion in WordPress?
In web design, an accordion is a tool for organizing content neatly. It looks like a list where each item expands to show more details when you click on it and then collapses when you are done. It’s a simple way to hide or show extra information without cluttering the page.
Meanwhile, jQuery is a JavaScript library that simplifies adding interactive features to your website. For instance, it enables you to add things like animations, dropdown menus, and clickable buttons – without having to write complex code from scratch.
This means that using a jQuery FAQ accordion in WordPress can make your site more organized and user-friendly. It lets you display frequently asked questions in a collapsible format, saving space and reducing clutter.
That way, visitors can quickly find the answers they need without scrolling through long blocks of text. This can give your site a clean look and improve SEO by making your content more structured, which search engines favor.
Having said that, let’s take a look at how to easily add a jQuery FAQ accordion in WordPress. We will be discussing multiple methods in this tutorial, but you can use the links below to jump to the one of your choice:
Method 1: Add a jQuery FAQ Accordion With WPCode (Recommended)
If you are looking for an easy and reliable way to add a jQuery FAQ accordion, then this method is for you.
For this approach, you will need WPCode, which is the best WordPress code snippets plugin on the market. It is the easiest and safest way to add custom code to your website. Plus, it comes with a premade code snippet for an FAQ accordion, making it an ideal choice.
First, you need to install and activate the WPCode plugin. For details, see our tutorial on how to install a WordPress plugin.
Note: WPCode has a free plan, but you will need the premium version to unlock the cloud library of code snippets.
Upon activation, visit the Code Snippets » + Add Snippet page from the WordPress dashboard and use the search form to locate the ‘FAQ Accordion’ snippet.
Once you do that, just click the ‘Use Snippet’ button under it.
This will direct you to the ‘Edit Snippet’ page, where the custom code for an FAQ accordion will already be added in the ‘Code Preview’ box.
Here, you just need to type the questions and answers for your accordion within the code. Once you do that, toggle the switch at the top to ‘Active’ and click the ‘Update’ button.
Now open the page or post where you want to add the FAQ accordion section in the block editor.
Here, click the ‘Add Block’ (+) button to open the block menu and add the ‘WPCode’ block to the page. Now, open the dropdown menu within the block to choose the ‘FAQ Accordion’ code snippet that you created earlier.
Once that is done, click the ‘Update’ or ‘Publish’ button at the top to store your settings.
Now visit your WordPress site to view the FAQ accordion in action.
Keep in mind that you will need to repeat the process to create an accordion for other pages.
Method 2: Add a jQuery FAQ Accordion With a Free Plugin (Easy)
If you don’t want to use any custom code on your website, then this method is for you.
First, you will need to install and activate the Advanced Accordion Gutenberg Block plugin. For more information, see our beginner’s guide on how to install a WordPress plugin.
Upon activation, open the page or post where you want to add FAQs and click the ‘Add Block’ (+) button at the top. Once the block menu appears, simply locate and add the ‘Separate Accordion’ block to the page.
Next, type your first question and answer within the accordion block.
Then, you can add an FAQ schema from the block panel by expanding the tab under the same name and toggling the ‘Make it enable’ switch.
After that, switch to the ‘Styles’ section within the right column. From here, you can customize the accordion text color, background color, icon color, and so much more.
Then, you can repeat this process to add as many FAQs as you like.
Finally, click the ‘Update’ or Publish’ button at the top of the page to store your settings.
Now, visit your FAQs page to see the jQuery accordion in action.
Method 3: Add a jQuery FAQ Accordion With SeedProd
If you want to add an interactive FAQ section to a custom page, then this method is for you.
To do this, you can use SeedProd. It is the best WordPress page builder that also comes with a special accordion block to add text sections that expand and collapse on your pages.
First, you need to install and activate the SeedProd plugin. To learn more, see our guide on how to install a WordPress plugin.
Note: SeedProd has a free plan. However, you will need the pro version to unlock the ‘Accordion’ block.
Upon activation, head over to the SeedProd » Settings page to enter your license key. You can find this information in your account on the SeedProd website.
After that, visit the SeedProd » Landing Pages screen from the WordPress admin sidebar.
From here, click the ‘Add New Landing Page’ button.
This will take you to a new screen where you will see a list of premade templates to choose from.
Once you make a choice, you will see a prompt asking you to enter a page name and URL. Enter the details and click the ‘Save and Start Editing the Page’ button to continue.
SeedProd’s drag-and-drop builder will now open on your screen. Here, you will see a block column on the left with a page preview on the right.
You can now add any element to your page, including an image, video, CTA button, heading, or text block. After that, drag and drop the ‘Accordion‘ block where you want to add your FAQs.
Then, click on the block again to open its settings in the left column. From here, expand the ‘Accordion 1’ tab and start typing your first FAQ.
You can now repeat the process to add other entries.
By default, the block adds only two accordions, but you can click the ‘Add New Item’ button to add as many FAQs as you like.
You can even configure the font size and space between each accordion using the given sliders.
Next, switch to the ‘Advanced’ tab from the top.
From here, you can change the text color, header color, background color, and divider color of the accordion.
Once you are done, just click the ‘Save’ and then ‘Publish’ button at the top.
You can now visit the newly created custom page to view your jQuery FAQ accordion.
Bonus: Add FAQ Schema in WordPress
Once you have added these jQuery FAQ accordions, it is a good idea to add FAQ schema for them. This can boost your SEO rankings and organic click-through rate by making your frequently asked questions appear directly in Google’s search results.
For this, we recommend All in One SEO, which is the best SEO plugin on the market. It is an all-in-one solution that optimizes your site for search engines and helps it rank higher with just a few clicks.
We’ve been using this tool on WPBeginner for the past few years, and since then, we’ve seen noticeable improvements in our search rankings. For details, see our AIOSEO review.
The tool comes with a built-in schema markup feature that can help search engines better understand your content. Upon plugin activation, just open up your FAQs page in the block editor.
Then, scroll down to the ‘AIOSEO Settings’ section and switch to the ‘Schema’ tab. From here, click the ‘Generate Schema’ button.
This will open the ‘Schema Catalog,’ where you need to find the FAQ option and click the ‘Add Schema’ button next to it.
After that, you can add your FAQs as they appear in your accordion. Once you are done, just click the ‘Add Schema’ button to store your settings.
Now, search engines will index these questions and show them on the search results pages, improving your rankings.
For details, see our tutorial on how to add FAQ schema in WordPress.
We hope this article helped you learn how to add a jQuery FAQ accordion in WordPress. You may also like to see our guide on how to easily display code on your WordPress site and our top picks for best WordPress development tools.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Dennis Muthomi
Method 1 with WPCode was really helpful, it’s a great balance of easy and customisable.
As a WordPress dev I’ve done similar things before but your step by step guide makes it accessible to beginners too.
One thing that I’ll add on what I’ve done before is use CSS transitions to smooth out the open/close animations of the accordion, it will make it even better. This will be a great resource for my future projects.
Zac Smith
Hello, I installed the Quick and Easy FAQ plugin, and then followed this video. I do not get an accordion FAQ, rather the only thing that shows up is the first FAQ question and answer … and the question is hyperlinked.
Daniel
Great tutorial!
My debugger complained about undefined variable $faq.
Defined variable at begin of function accordion_shortcode() with $faq = ”;
As well my version of FAQ plugin enters the value ‘faq’ instead of ‘query’ into the field post_type of the table postes.
Adjusted line 23:
‘post_type’ => ‘faq’,
Johan Johnsson
It’s silly that you’ll have us install a plugin for a FAQ page and follow your previous tutorial on how to make that FAQ page, and then copy (essentially download) the plugin you made for this tutorial. So we’re essentially downloading 2 already finished plugins.
I don’t think people come here to download 2 plugins, but rather to LEARN how to make a custom accordion menu of their own. I don’t see why I should follow this “how to guide” when I can just download some other WP plugin that does the same job, if not better.
And the fact that this plugin relies on the FAQ plugin seems quite unnecessary. Why didn’t you make a stand-alone plugin and make it dynamic? So you can use it for any content on any page.
WPBeginner Support
Hi Johan,
Most our users are beginners who would find it difficult to copy paste code. This is why we made it into a plugin so that users can download and install it. If you would like to use the code method, then the code is here for you to study and use it in your theme or a site-specific plugin. Let’s us know if you need any help with that.
Admin
Kim
How do I make it so that when I click the title it collapses – I see that it collapses when you click another part of the accordian but I am looking for the function to collapse when each title is clicked.
christina
thanks for the tutorial. I am very much new to coding and webpage design. I have followed instructions to pasting the codes to my notepad on my mac. Is there a different way to save the file other than in notepad as a php or js file into the folder? Also, could you please let me know step by step how to open FTP client (what is it btw?) and how to upload my-accordian folder to /wp-contnt/plugins/directory to WP website. Thanks so much.
christina
when I save the textedit file it saves as my-accordion.php.rtf. Is that correct?
WPBeginner Support
No. You need to save it as my-accordion.php Windows programs sometimes add this extension to your text file. Try using Save File As option.
Admin
WPBeginner Support
On Mac you have a program called TextEdit. For FTP see our guide on how to use FTP to upload WordPress files.
Admin
Nurul Amin
I have activated this plugins successfully, but it is not working. Displaying nothing in my FAQs Page.
WPBeginner Staff
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
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!
Stefan 13
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
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
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
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:
Caroline
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!!!
raouf
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
Mahesh Waghmare
Thanks…
Rana
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
Chris
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
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.cssif it is there then this means you have successfully loaded CSS theme.Admin
Chris S.
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
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:
1-click Use in WordPress
Admin
Chris S.
Great- thanks for your help with this!
Garrett
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
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
WPBeginner Support
Try switching to a default WordPress theme to see if it works then.
Admin
Richard Morrison
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.
Piet
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’
Editorial Staff
Updated the article.
Admin
Mary-Anne
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.
Editorial Staff
This sounds like a support question that needs to be posted on the plugin forum.
Admin
birge
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
Editorial Staff
Are you sure that the plugin file location is something like this: /wp-content/plugins/accordion/my-accordion.php
Admin
birge
Exactly.
alin
I do just what you said but I can’t activate the plugin from plugins dashboard because I can’t se it
curdaneta
You forgot include the script file “accordion.js” …
Editorial Staff
We shared the accordion.js code in there. It is also being included using enqueue script.
Admin
curdaneta
Sorry, but I find the link to the file
Editorial Staff
There is no link to the file. We have shared the code that you need to paste in a new file that you will create called accordion.js
curdaneta
Sorry, my bad
I didn’t read carefully. Now everything works as expected
curdaneta
curdaneta
Hello
It doesn’t work for me using the shortcode in several paragraph
Regards
curdaneta
Gaelyn
Thanks. I can see where this will come in very handy.
Drake
Thank you for the article. It would be nice have a similar one that explain how to introduce jQuery tabs to pages/posts.