## Tabs with jQuery

Tab Plugin for jQuery allows the easy creation of tabs from simple markup.

- Accessible, Unobtrusive Javascript Tabs wtih jQuery
  - Demos

Without JS and CSS:

With JS and CSS:

- Example: tabs.html

Markup:

<div id="container"> <ul class="anchors"> <li class="on"><a href="#basic">Course</a></li> <li class=""><a href="#description">Description</a></li> <li class=""><a href="#schedule">Schedule</a></li> </ul> <div style="display: block;" id="basic" class="anchor"> <h2>Course Information</h2> <h3>Fundamentals of Website Development</h3> <p> Harvard Extension School, Spring 2007-2008 <br/> CSCI E-12 <br/> Wednesday, 5:30 to 7:30 pm</p> </div> <div style="display: none;" id="description" class="anchor"> <h2>Course Description</h2> <p>This course provides a foundation ...</p> </div> <div style="display: none;" id="schedule" class="anchor"> <h2>Schedule of Lectures</h2> <ol> <li>Introduction, Internet and Web Basics</li> <li>Markup: XHTML and HTML, Part 1</li> ... </ol> </div> </div>

JS:

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