jQuery experiments: Simple Generated Tabs
The script inserts an unordered list with tabs before the element that contains the content sections. The link text in each tab is generated, using the heading of the corresponding section.
There are some options (see Third Section below). For example, whether to show or to hide the headings of the sections, and which section will be shown by default.
We can add or remove sections and the script will automatically add or remove the needed tabs.
Another advantage of this plugin is that if you later decide to implement accordion functionality instead of tabs, you can do so without changing your HTML code. See the sample markup in Second Section below. You can easily apply an accordion plugin to this code.
With JavaScript turned off, the whole content is expanded and logically ordered - each heading, followed by his corresponding content.
First Section
The First Section is active by default.
The plugin requires jQuery v1.3+.
To call the plugin with all default options, insert the following code in your HTML document:
<script type="text/javascript">
$(function() {
$("#container").gTabs();
});
</script>
#container is the ID of the element that contains the sections.
Second Section
The ID of the container element is needed for calling the plugin.
There is no need of other ID-s or CLASS-es.
Sample markup:
<div id="container">
<h3>Title 1</h3>
<div>
<p>Section 1 content</p>
<p>...</p>
</div>
<h3>Title 2</h3>
<div>
<p>Section 2 content</p>
</div>
<h3>Title 3</h3>
<div>
<p>Section 3 content</p>
</div>
</div>
Third Section
Options:
section : 'div', // the container element of the individual sections head : 'h3', // the section heading prefix : 'section', // the prefix of the hash def : 1, // the section to be shown by default hideHead : 'true' // whether to show or to hide the section headings