1. jQuery Widgets: Tabs Requires core jQuery library + jQuery UI
Examples:
API:

2. Click tabs to swap between content that is broken into logical sections.

3. collapsible
Click the currently selected tab again to toggle its content closed/open

4. Quick Interlude About What AJAX is
Update a web page without reloading the page Request data from a server - after the page has loaded  Receive data from a server - after the page has loaded Send data to a server - in the background
***Need to actually host files on a server to see this work

5. Populate Tab Content via AJAX
Content and Markup can reside in an outside file. When tab clicked, loaded from that file into content pane.

6. Vertical Tabs – Script + CSS

7. CSS

8. Styling Tab Parts
Components of a tabs already have specific class names they use for styling
You can access individual components and apply usual style rules
Needs to be either internal style (in head) or external sheet linked in after the default one from Google Hosted Libraries so these rules win in a fight

9. Styling .ui-tabs Outer container of the tabs
Defaults to background image, which you may turn off if not wanted

10. Styling .ui-tabs-nav .ui-tabs-anchor .ui-tabs-panel
Section behind list of tabs
Default has background image – turn off to see background color
.ui-tabs-anchor
Tabs themselves
.ui-tabs-panel
Panel associated with active tab
Background cannot be set for this