Adding an Accordion to Your WordPress Website

We often use accordions on FAQ pages for our clients. I get asked by designers which plugin to use for a good accordion. I find it much more efficient and fairly easy to add my own accordion code. Too many plugins can slow down your WordPress site and require more updates. Here’s how to add your own jQuery accordion.

First, you need to include the jQuery and JQuery UI libraries in your code. But, before you include anything you must check to make sure your theme doesn’t already include them. I think many themes designers already include at least jquery.js in their themes. As a matter of fact, I think the latest versions of WordPress include this file by default. Some themes will also include jquery-ui.js or some filename variation. You don’t want to include these twice.

To see if your theme already includes these libraries, go to the page where you want to add the accordion. If you haven’t created the page or post yet, go ahead and create a page. Just give it the title and leave the content blank if you want. We just need to make sure the page exists.

View the source of the page. How you do this will be different for your browser. Many browsers will show you the source if you press and hold the ‘control’ and ‘alt’ keys and then the ‘u’ key in Windows and the ‘command’, ‘option’ and ‘u’ keys on a Mac. That should open up a new browser tab or window showing you the HTML code for the page. If this doesn’t work for you, then do a Google search for ‘how to view the HTML source in your browser‘. (Of course, replace ‘your browser’ with the browser you are using.)

Once you can see the source, search for lines that look something like this:

<link rel='stylesheet' id='jquery-ui-css'  href='http://example.com/wp-content/themes/yourtheme/css/jquery-ui.min.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='jquery-ui-theme-css'  href='http://example.com/wp-content/themes/yourtheme/css/jquery-ui.theme.min.css?ver=4.0' type='text/css' media='all' />
<script type='text/javascript' src='https://example.com/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='https://code.jquery.com/ui/1.11.2/jquery-ui.js?ver=4.0'></script>

You can usually search a web page using the ‘control’ and ‘f’ keys on Windows and ‘command’ and ‘f’ on a Mac. This should bring up a search box that will allow you to find all the occurrences of a word on the page. Just search for ‘jquery’ and you should see all these lines highlighted for you.

Your file’s paths and names may look different from these, but there should be some variation of the .js files. The css files are not always included and you don’t have to add them unless you want the default styling associated with your accordion. (I’ll show you how to find and add your accordion theme files below.)

Also, these lines may not be together in your page source, they may be spread out. And they may be in a different order.

Many times your theme will have the jquery.js, but not the jquery.com/ui file. The important thing for now is to be aware of what is already included in your theme so you know what files need to be added to make your accordion work.

Once you know which files need to be added, you can load the files through the wp_enqueue_scripts function in your theme’s functions.php file. The function may already be in your themes functions.php file. If it is, there’s no need to add it again, just add your wp_enqueue_script() lines to the existing function. If it’s not there, then add the whole function as well as the add_action() function.

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
function my_enqueue_scripts() {
	wp_enqueue_script( 'jquery', 'http://code.jquery.com/jquery-1.10.2.js' );
	wp_enqueue_script( 'jquery-ui', 'http://code.jquery.com/ui/1.11.2/jquery-ui.js' );
	wp_enqueue_style( 'jquery-ui', '/wp-content/themes/yourtheme/css/jquery-ui.min.css' );
	wp_enqueue_style( 'jquery-ui-theme', '/wp-content/themes/yourtheme/css/jquery-ui.theme.min.css');
}

Of course, you will need to change the paths to your WordPress site paths so that it can find the files. You may have to download the files from the jquery or jqueryui.com sites if they aren’t included already. If they are included already, there is no reason to add them to this function in your functions.php file.

Save this file and refresh your page. View the source and make sure all the files are now listed in the source.

Now, we just have to build the accordion. We can add this code to the WordPress page itself. Just open your page to edit it and add the following code somewhere on the page:

<script>
  jQuery(function() {
    jQuery( "#accordion" ).accordion();
  });
</script>

Now, we can tell our page that we want to use an accordion on the page. Just put a

<div id="accordion">
<h2>Question #1</h2>
<div>Bacon ipsum dolor amet pork salami landjaeger corned beef boudin prosciutto andouille shankle fatback spare ribs sausage kevin. Venison salami fatback pork loin tail short loin filet mignon jowl pork belly beef brisket. Corned beef cow andouille pancetta porchetta frankfurter sausage tongue doner meatball. Kevin strip steak cow shankle, jowl jerky prosciutto. Pork corned beef leberkas shankle pork loin porchetta andouille jerky rump tenderloin alcatra chuck hamburger turducken.

</div>

<h2>Question #2</h2>
<div>Bacon ipsum dolor amet turducken andouille ball tip chicken. Tongue pancetta ham strip steak, jowl pork short ribs short loin beef leberkas salami ham hock picanha. Short loin meatloaf turducken bacon. Meatball sirloin jerky sausage. Jerky flank leberkas beef ribs, prosciutto picanha kielbasa spare ribs brisket pancetta pork loin. Pastrami sirloin leberkas flank bresaola beef ribs kevin chuck tenderloin shoulder beef salami.

Spare ribs hamburger frankfurter, short loin leberkas ham tail meatball chuck. Pig turkey salami capicola swine venison t-bone. Beef ribs leberkas tenderloin, pork loin t-bone kielbasa capicola frankfurter shankle biltong cupim shoulder turducken. Filet mignon jerky pastrami sausage venison beef ribs, swine boudin cow frankfurter.</div>

<h2>Questions #3</h2>
<div>Answer #3 - Bacon ipsum dolor amet doner pancetta drumstick turducken, ham hock andouille pork belly frankfurter chicken biltong fatback. Biltong ham hock tongue shank drumstick, leberkas ham sirloin strip steak bacon pancetta short ribs doner sausage pork. Pig beef ribs kevin porchetta. Chuck leberkas ribeye tongue brisket pastrami. Prosciutto pork loin swine bacon, hamburger kielbasa andouille biltong jowl. Ground round pig frankfurter pork. Capicola salami t-bone ball tip, alcatra flank venison picanha sausage jerky tenderloin spare ribs sirloin.

Swine sirloin cupim, chicken alcatra fatback brisket bresaola pork belly short ribs ball tip shankle flank. Porchetta biltong doner shank meatloaf chicken venison. Doner t-bone ribeye jowl brisket filet mignon. Tongue spare ribs kielbasa, kevin pastrami drumstick sirloin ground round pork porchetta boudin turducken.</div>

<h2>Question #4</h2>

<div>Bacon ipsum dolor amet ribeye cow sausage, short ribs meatloaf fatback bacon spare ribs beef cupim shank. Turducken ham shankle chuck flank shoulder rump pig picanha porchetta cupim tail. Venison beef shankle short ribs, turducken ground round corned beef fatback. Rump bacon andouille, shankle chicken shank pancetta doner. Andouille ham hock shank t-bone turducken.

</div>
</div>

<script> 
  jQuery(function() {
    jQuery( "#accordion2").accordion({
      heightStyle: "content"
    });
  });
</script>