Way 2 Web

Web development tips


 
Tabbed Content

Introduction

Lots of content? Little space? JavaScript Tabs come to the rescue.

Tabbed data interfaces look professional and are readily understandable - user friendly.

Our implementation uses an <ul> for the tabs, and a <div> for each content area.

This approach is ideal when the content forms part of one form to be submitted - you can be sure that all form fields are present, as apposed to some AJAX approaches that load content "on demand." (See our Ajax implementation.)

API

Constructor

Tabs (HeaderElementArray, ContentElementArray, StartIndex, TrackerElementID);
HeaderElementArray
Array of tab element IDs
ContentElementArray
Array of content element IDs, parallel to HeaderElementArray
StartIndex
Index to both arrays indicating which tab is to be displayed on page load
TrackerElementID
ID of form element used to track which tab is active. Useful when you need to reload the page and open to the tab that was last active. (I.e., next page load, use this element's value for the StartIndex parameter.)
[Top of page]

Demo

Content tabs

Click a tab to view its content. Tabs have the same width but variable height.

When the content areas fall within one form element, the form fields from all content areas are submitted with the form, including the 'hidden' content areas.

  • Tab 1
  • Tab 2
  • Tab 3

First page content...

First page content...

First page content...

Second page content...

Second page content...

Second page content...

Second page content...

Second page content...

Third page content...

Third page content...

Third page content...

Third page content...

Third page content...

Third page content...

Third page content...

Third page content...

Third page content...

[Top of page]

Code

HTML

            <ul class="tab-headers">
                <li id="tab-header1">Tab 1</li>
                <li id="tab-header2" class="active">Tab 2</li>
                <li id="tab-header3">Tab 3</li>
            </ul>
            <div class="tab-content" id="tab-content1">
                <p>First page content...</p>
                <p>First page content...</p>
                <p>First page content...</p>
                <input type="text" name="text1" value="testing text 1" />
            </div>
            <div class="tab-content" id="tab-content2">
                <p>Second page content...</p>
                <p>Second page content...</p>
                <p>Second page content...</p>
                <p>Second page content...</p>
                <p>Second page content...</p>
                <input type="text" name="text2" value="testing text 2" />
            </div>
            <div class="tab-content" id="tab-content3">
                <p>Third page content...</p>
                <p>Third page content...</p>
                <p>Third page content...</p>
                <p>Third page content...</p>
                <p>Third page content...</p>
                <p>Third page content...</p>
                <p>Third page content...</p>
                <p>Third page content...</p>
                <p>Third page content...</p>
                <input type="text" name="text3" value="testing text 3" />
            </div>

Javascript

<script language="javascript" src="../../js/x/x_core.js"></script>
<script language="javascript" src="../../js/y/ylib.js"></script>
<script language="javascript" src="../../js/y/y_Tabs.js"></script>
<script language="javascript">
        var arrayHeaders  = ["tab-header1","tab-header2","tab-header3"];
        var arrayContents = ["tab-content1","tab-content2","tab-content3"]; 
			             
        window.onload = function(){
	        var tabRelationship = 
	            new ylib.widget.Tabs(arrayHeaders, arrayContents, 0);
        }
</script>

Css

ul.tab-headers,
.tab-content {
    width: 400px;
}
ul.tab-headers { 
    height: 20px;      
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0;       
}
ul.tab-headers li {
    float: left;
    padding: 3px 10px 3px 10px;
    border: solid 1px black;
    border-bottom: 0;
    margin-left: 3px;
    cursor: pointer;
}
ul.tab-headers li.active {
    background-color: black;
    color: white;
}
.tab-content {
    margin: 0;
    padding: 0 5px 5px 5px;
    border: solid 1px black;
    visibility: hidden;
}

Note that we define the content areas as visibility: hidden; so that the they don't appear momentarilly as the page loads.

[Top of page]

Files

[Top of page]