This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs. A fully unobtrusive, CSS and HTML based script, it supports practical features such as persistence of the active tab (ie: when page is reloaded), an "IFRAME" mode, a "SlideShow" mode, ability to expand/contract arbitrary DIVs on the page at the same time, nested tabs, and much more. We got our Inspiration for this script from Yahoo's homepage, which employs such a concept to show news in an organized fashion.
Here's a quick outline of the script features:
Fetch and display an external page (from the same domain) inside a container when a tab is clicked on via Ajax.
(v 2.0) Apart from Ajax, an external page can also be fetched and displayed via the IFRAME element instead. This is useful for external pages that either contain JavaScript/ CSS code that doesn't run properly when fetched via Ajax, or the page is from an outside domain.
Add a "default" content inside the container to either be shown while no tabs are selected, or to be associated with a specific tab. The default content is added inline on the page and not fetched via Ajax, to avoid unnecessary fetching of external pages.
Supports session only persistence, so the last tab user clicked on is remembered if he/she returns to the page within the same browser session.
(v 2.0) Supports auto mode, in which script automatically cycles through and selects each tab periodically until a tab is explicitly selected.
(v 2.0) Ability to also expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted.
(v 2.0) Ability to dynamically select a tab either based on its position within its peers, or its ID attribute.
(v 2.1) Ability to dynamically cycle forward/back Between tabs. Create a "Next" and "Back" link for users to move between tabs, for example.
