How to use JQuery for WordPress Theme Styling

JQuery Tabs for WordPress Website

Tabs are generally used to efficiently break content into multiple sections that can be swapped to save space, much like an accordion. The easiest way to add stylish tabs to a wordpress is by using  JQuery UI library available under GPL license.

Here is the code for tabs:

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">First</a></li>
		<li><a href="#tabs-2">Second</a></li>
		<li><a href="#tabs-3">Third</a></li>
	</ul>
	<div id="tabs-1">Creating tabs is easy with JQuery UI Library.</div>
	<div id="tabs-2">Creating tabs is fun with JQuery UI Library.</div>
        <div id="tabs-3">JQuery UI Library makes developers life easy.</div>
</div>

Add the following javascript code in the header section of your wordpress theme

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
});
</script>

If you want to change the style of tabs you can modify jquery-ui.css file. Alternatively you can use the themeroller to change the tabs style.