Screen Shot 2014-11-15 at 9.36.33 AMWe 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

tag with an id of ‘accordion’ (or whatever id you want – just make sure it’s the same as the #id in the jQuery function above) around all the accordion elements. Place header tags around the heading of each accordion and then a div around the text for each accordion section like this:

NOTE: I’m using the Bacon Ipsum generator to generate the dummy text in these accordions.

<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>

 

This code will produce an accordion that looks like this:

Question #1

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.

Question #2

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.

Questions #3

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.

Question #4

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.

 

Notice how the boxes for the text are all the same size and you have to scroll down to see all the text in some boxes. That’s fine if that’s what you want – that’s the default. But, I prefer the box to size according to the content. I change the jQuery to this:

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

Now my accordion looks like this:

Question #1

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.

Question #2

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.

Questions #3

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.

Question #4

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.

 

Now all my boxes are just big enough for the text.

There are many other options for the accordion. You can see them all here. You can see some examples of the accordion here.

You can choose different themes for your jQuery UI elements here. Once you decide how you want your accordion to look, you can download the appropriate theme and then move the files you need to your WordPress theme. Make sure to also move the image files to your WordPress theme folder. Also, make sure you get the paths to those files correct in your wp_enqueue_script function as well.

If this still looks confusing and difficult, I would be happy to add an accordion to your site for you. just fill out the form below and I’ll get it added as soon as possible.

Oops! We could not locate your form.

Leave a Comment

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