The jQuery UI Accordion in WordPress

In a previous tutorial I demonstrated a method for adding jQuery UI tabs into WordPress. If you have read that tutorial, then this tutorial follows a similar method to create a jQuery UI accordion in WordPress. For the purpose of this tutorial we will be using the jQuery version provided by your default WordPress installation. In addition, we will manually add code directly into a post or page. Once you understand the basics, you can get creative with accordions in WordPress.

The WordPress enqueue function

There have been many articles written about how to properly include jQuery into WordPress. It is, however, important that you understand the WordPress enqueue function. My recommendation is to read the articles provided by the WordPress Codex on the wp_enqueue_script and wp_enqueue_style functions. Now let’s get on with the tutorial.

The HTML markup

This demonstration uses the basic HTML markup provided by the jQuery UI website. You can place this markup in a template or anywhere you want to customize your WordPress site. In our example, we paste this code into our post by click the “text” tab next to the “visual” tab in our post editor.

<div id="accordion">
<h3>Section 1</h3>

<div>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div>

<h3>Section 2</h3>

<div>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
</div>
</div>

Paste the HTML markup in your post or template and now we are ready to move on to the jQuery code.

The jQuery UI accordion code

Using the code provided by the jQuery UI website we must convert it into something that will play nicely in WordPress. Use the WordPress recommended “no-conflict” method to prevent conflicts with plugins or your existing theme. In this example I created a file called accordion.js and saved it in a folder called js within our theme folder.

$(function() {
	$( "#accordion" ).accordion();
});

Using the code above, we have to convert the code as follows:

	jQuery(document).ready(function($) {
		$( "#accordion" ).accordion({
			collapsible: true
		});
	});

We then save this code in our accordion.js file and place it in our js folder.

Enqueue your script through the functions file

Once the script has been created and saved, the next thing we must do is enqueue the script through our functions file. In this example I am using “get_stylesheet_directory_uri()” because I am working with a child theme. If you are working with a parent theme, you will want to replace this with “get_template_directory_uri()”.

function my_scripts_method() {
if ( !is_admin() ) {
	wp_enqueue_script('jquery-ui-accordion');
	wp_enqueue_script(
		'custom-accordion',
		get_stylesheet_directory_uri() . '/js/accordion.js',
		array('jquery')
		);
	}
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

 Add your accordion stylesheet

We are also going to enqueue our stylesheet through our functions file. As stated above, because I am working with a child theme I am using “get_stylesheet_directory_uri”. If you are using a parent theme remember to replace this code with the one mentioned above.

wp_register_style('jquery-custom-style', get_stylesheet_directory_uri().'/css/jquery-ui-1.8.23.custom.css', array(), '1', 'screen'); 
wp_enqueue_style('jquery-custom-style');

For this example we used a custom jQuery UI stylesheet from the jQuery website. Remember to include the background images and icons in your download. I then uploaded the stylesheet and images into my css folder.

Conclusion

Once all the code above has been put together you should have a functioning accordion. Of course, you can style and change the look of your accordion. If you have a method that has worked for you, feel free to share it in the comments below.

Jose is a WordPress specialist and front end developer with a passion for writing. Building websites since 1999, he enjoys coding, but mostly Jose enjoys traveling, a bowl of ramen and practicing Tai Chi.

Similar Posts

13 Comments

  1. Thanks for the tut’s. These have been clear and concise far more than others out there.

    For those looking for more than one accordion per page change:
    IN: “accordion.js”
    FROM : $( “#accordion”
    TO: $( “.accordion”
    Here, you are changing the jquery accordion selector from an ID (#) to a class (.) . ID’s must be unique per page (cannot repeat) so you can’t have more than one DIV with ID “accordion” on a page. However, classes can repeat.

    Then, in the HTML code change “ID=”accordion” to “class=”accordion”.
    That’s it. Now you can have as many as you wish.

  2. I like this method the best, I use accordions on almost every site I make etc the question is… how to have several accordions on one FAQs page hmm so far in the js file I just have to add accordion1 accordion2 accordion3 to compensate. Any suggestions?

  3. Hello, I’m not real great with code. I have created an accordion template in WordPress. I need 14 Accordion tabs on a website. My issue is that I have 44 websites. Is there an offline way to enter all the text that i need on my accordions and then easily enter it online so that each accordion is filled in with the text I intended?

  5. Awesome.

    I added a bit of code so the accordion would be fully collapsed on start.

    jQuery(document).ready(function($) {
    $( “#accordion” ).accordion({
    collapsible: true,
    active: false
    });
    });

  6. The best explanation so far. I have been googlin for an entire week and find out how to insert accordion to left menu without plugins.

    Thanks a lot.

  7. Thanks for this post, my problem is this `wp_enqueue_script(‘jquery-ui-accordion’);` loads by default in the footer and `wp_register_style(‘jquery-custom-style’)` loads in the header. My accordion doesn’t work. Do both scripts have to load in the header or footer? I’m not sure how I can specify where the `wp_enqueue_script(‘jquery-ui-accordion’);` loads? I know that setting custom enqueue script to true for the in footer handle works but not sure how to do it for scripts that come with wordpress?

    1. I managed to get it to work it was a conflict on my theme, thanks for the post.

  8. Thanx a lot..it worked like a charm. However I have a query. In case of normal html pages, I used to add the following piece of script to customize the accordion, like loading the page with all the tabs closed.

    $(function() {

    $( “#accordion” ).accordion({
    collapsible: true,
    heightStyle: “content”,
    active:false
    }
    );

    // Hover states on the static widgets
    $( “#dialog-link, #icons li” ).hover(
    function() {
    $( this ).addClass( “ui-state-hover” );
    },
    function() {
    $( this ).removeClass( “ui-state-hover” );
    }
    );

    How can I do the same in wordpress? I tried adding it in the page code, bt didn’t work.

  11. can we use tabs and accordion in same file.
    I have tried using :

    jQuery(document).ready(function($) {
    $(‘#tabs’).tabs();
    $(‘#accordion’).accordion({
    collapsible: true
    });
    //hover states on the static widgets
    //~ $(‘#dialog_link, ul#icons li’).hover(
    //~ function() { $(this).addClass(‘ui-state-hover’); },
    //~ function() { $(this).removeClass(‘ui-state-hover’); }
    //~ );
    });

    tabs are working but not accordion.
    Please suggest.

  12. Just wanted to drop in with a note of appreciation and say “Thank You” for your wonderful tutorial / example / how to … greatly appreciated and as fyi, earlier this evening i had the opportunity to give it a complete whirl and am happy to report i achieved working accordions … gracias 🙂

    as further fyi, it has been a bit of a funky journey (code-wise that is) these past several days trying to determine best path for UI elements in WP responsive child theme … had evaluated a number of jQuery, Bootstrap and other UI related plugins and even rolled my own bootstrap functionality plugins … but all of these had issues and it was only after reading about using native jQuery scripts that ship with WP did it is start to sink in … and your two posts, this one and the one on tabs, really helped bring it all together … again, BIG THANK YOU for sharing … cordially, chuck scott

Comments are closed.