Creating a tab control in your web page

A simple working example

Let's jump straight in and see the completed working example. Below we have three tabs. The third has a link to the first and demonstrates how we can activate tabs and link to them. This is discussed in section 3.

Tab control example using click to change tabs

Tab control example using mouseover/hover to change tabs

Section 1: Include the required files.

First off you will need to include the supporting files. Paste the following into the [Additional Javascript] section of your Webpage or Article Template.

Section 2: Create your tabs

below is the basic format for the tabs. 

• In the first line set the width as required and give the div (this is the wrapper div) a unique classname (in the example below we use 'tabinstance1'), we will use this later in section 4 to initialise the tab control.
• Then the tabs are defined. using a UL and as many LI's as required. Create as many tabs as required by adding additional li elements. NOTE: the UL class name must have the class name 'dgtabs'
• Then the tab content areas are defined. These are are wrapped in a div whose that requires the class name dgtab_container, ensure you have as many tab content divs as there are tabs (above). NOTE: The tab content div's require the class name 'dgtab_content'.
• NOTE: Ensure the rel values for your dgtabs anchors are unique (in this example we use 1 2 and 3 and also ensure the id values for your dgtab_content divs are unqiue, in the example we have used tab1, tab2 and tab3

Section 3: Creating a hyperlink to a tab

To link to a tab and have the tab contents displayed and become the active tab use the seekToTab() function as below, there is a is demonstration of this in the working example above.

Section 4: Initialise the tab control

Section 5: Creating multiple tab controls on a page.

You can have as many tab controls appear on a page as required.

Read section 2 carefully, and ensure the div outer wrapper classname is unique and create an additional call to initialsieDGTabs() for each control you create (see section 4 above), check that your dgtab_content dvs have unique ids and the anchors within the dgtabs UL have unique rel values.