JQuery Tabs Not Working

Adding jQuery tabs to a website doesn’t seem all that hard – until you run into an unexpected problem.

First you need to go to the jQuery website and find the source code on the tabs page. Make sure that you copy the html into your page. Grab the bit of javascript in the script section and paste it into a .js file in your js folder. Then open your functions file. Since WordPress already includes copies of jQuery and jQuery-ui you don’t need to download them. Just enqueue them like this:

1
2
3
4
5
6
7
8

function add_script() {
   if (!is_admin()) {
	wp_enqueue_script('jquery');
	wp_enqueue_script('jquery-ui-core');
	wp_enqueue_script('jquery-ui-tabs');
	}
}
add_action('init', 'add_script');

Then you add your script:

1
2
3
4
5
6
7
8
9

function add_script() {
   if (!is_admin()) {
	wp_enqueue_script('jquery');
	wp_enqueue_script('jquery-ui-core');
	wp_enqueue_script('jquery-ui-tabs');
	wp_enqueue_script('mk-tabs', get_bloginfo('url') . '/wp-content/js/mk-tabs.js', array('jquery'));
	}
}
add_action('init', 'add_script');

Change the path to your .js file as needed.

Finally you need a style sheet. I customized my styles on the jQuery website and downloaded them in one ready-made style sheet – pretty fifty!

1
2
3
4
5
6
7
8
9
10
11

function add_script() {
   if (!is_admin()) {
	wp_enqueue_script('jquery');
	wp_enqueue_script('jquery-ui-core');
	wp_enqueue_script('jquery-ui-tabs');
	wp_enqueue_script('mk-tabs', get_bloginfo('url') . '/wp-content/js/mk-tabs.js', array('jquery'));
        wp_register_style('tabs-css', get_bloginfo('url') . '/wp-content/js/jquery-ui-1.9.2.custom.css');
	wp_enqueue_style('tabs-css');
	}
}
add_action('init', 'add_script');

That’s it! Or so I thought. All tabs were showing one below the other. Naturally I thought I must have done something wrong and went in search of my mistakes. I did find a couple of errors but they were really minor. What I finally realized was that the stylesheet I downloaded had one essential line missing:

1
2
3

#tabs .ui-tabs-hide {
	display:none;
}

Tabs that are not active get the class of .ui-tabs-hide but then there needs to be a rule in the stylesheet that actually hides them. It was missing from the download. Once I added the line, my tabs worked beautifully.