How to Add jQuery FAQ Accordion in WordPress

According to the web technology terminology, accordions are referred as UI design patterns that hold tabs and content that expand or close down whenever you interact with it. Every tab holds some amount of content and it gets expanded whenever you tap on the item. To make it simple, accordion is a tiny menu item that gets opened up when you hit it.

Adding jQuery FAQ Accordion:

Before planning to insert a jQuery FAQ accordion onto your website, you must check that your website holds a FAQ section. Follow the tutorials to add it in a pretty easy way without any technical knowledge.

In general, your WordPress website includes a jQuery library but it doesn’t support jQuery themes. In order to make your website a jQuery supportive, you need to queue up the scripts in WordPress. The scripts that you require can be loaded from the Google CDN. You must even create an effective shortcode for displaying the frequently asked questions.

Adding jQuery FAQ Accordion

You have to just create a new folder on your desktop and term it as my-accordion. In next step, you can open any text editor and craft a new file by the name my-accordion.php and later paste the below given code into it.

Adding jQuery FAQ Accordion

Adding FAQ Page with Accordion:

To depict all the FAQs in an accordion manner, you should craft a new page. To create new page, you need to reach the Pages option and then click on ‘Add New’ option. You must even a give a title to your page and it can be easily done by entering the shortcode placed below.


On adding the shortcode, you can save and publish the page to have a preview of nice accordion menu on your WordPress website.

Altering Colour and Style of Accordion:

To make your accordion look beautiful, you can add attractive colours and striking stylings to the FAQ accordion. To stylize the accordion, you can utilise the jQuery UI themes present on the Google. It’s a style sheet that can be downloaded and placed to make your website bit attractive. There are quite a few jQuery themes available for you like smoothness, Cupertino, humanity etc. You can even modify or craft a new jQuery theme by utilizing Themeroller.

Adding jQuery FAQ Accordion


Leave a Reply

Your email address will not be published. Required fields are marked *

1000's of Wordpress Templates at Great Prices: Visit ThemeForest