code.Atomic8Ball.com

jQuery Tabs Instructions

1. Confirm that the site has both jQuery (min 1.6+) and jQueryUI (any version)
2. Place the following between the <head> and </head> tags. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
  $(function() {
     $("#tabs").tabs();
  });
</script>
3. Add your HTML to create the tabs, wrap the HTML in a <div> that has an id or class matching the selector above. <div id="tabs">
  <ul>
    <li><a href="#tabs-1"></a></li>
    <li><a href="#tabs-2"></a></li>
    <li><a href="#tabs-3"></a></li>
  </ul>
  <div id="tabs-1">CONTENT GOES HERE</div>
  <div id="tabs-2">CONTENT GOES HERE</div>
  <div id="tabs-3">CONTENT GOES HERE</div>
</div>

Notes:

This is the most common setup, but you have some additional options available

• open on mouse-over
• tabs at bottom
• vertically aligned tabs, rather than horizontal

View more on http://api.jqueryui.com/tabs/