Download tab panes

Demo | Demo with two tab sets

Bookmark and Share

Download files

You can download all the files needed for this script from this Zip file.

Files in package

  • tab-view.html = Main html file
  • tab-view-demo2.html = Main html file(with two tab sets)
  • js/ajax.js = Ajax (Library from
  • js/tab-view.js = Main js file for this script
  • css/tab-view.css = Cascading style sheet for the script
  • externalfile.html = Sample file loaded by Ajax as content of dynamic created tab
  • images/* = Images used in the script


It's easy to configure this script. You put your content into separate <DIV>s and then call a javascript function which creates the tabs dynamically.
<div id="dhtmlgoodies_tabView1">
  <div class="dhtmlgoodies_aTab">
    Content of tab 1
  <div class="dhtmlgoodies_aTab">
    Content of tab 2
  <div class="dhtmlgoodies_aTab">
    Content of tab 3
  <div class="dhtmlgoodies_aTab">
    Content of tab 4
<script type="text/javascript">
initTabs(Array('Menu scripts','Calender',
'Menus','About us'),1,500,400);

<div id="dhtmlgoodies_tabView1"> is parent to the content of all your tabs. Inside it, you have one <div class="dhtmlgoodies_aTab"> for each tab window. Put the content of your tabs inside them.

You initialize the script by calling the initTabs() function. Arguments sent to this are:

  • ID of parent element, example: dhtmlgoodies_tabView1
  • Array('Menu scripts','Calender','Menus','About us') = An array of tab labels
  • 1 = Index of active tab(0 = first tab, 1 = second tab...)
  • 500 = Width of tab pane
  • 400 = Height of tab pane(Use empty string("") if you want dynamic height)
  • Array(false,true,true,true) = Array of close button visibility. One item for each tab. When set to true, a close button will appear at the top right corner of the tab

Create new tab dynamically

You can call the function createNewTab() when you need to create a new tab dynamically. Arguments to this functions are:

  • Tab title = Tab title as string
  • Content = Tab content as string(optional)
  • Url to content = Url to file(optional). The content of this file will be loaded dynamically by Ajax

Remove a tab

You can remove a tab by calling the function deleteTab(tabTitle). Input to this function is the label of the tab you want to remove, example: deleteTab('Menu scripts');

Add content dynamically to one of the tabs

You can use the function addAjaxContentToTab to add content from an external file dynamically to one of the tabs. This function takes two arguments:

  1. Title of tab, example: "Menu scripts"
  2. Relative path to external file, example: "includes/"

Example: <a href="#" onclick="addAjaxContentToTab('Menu scripts','includes/');return false">Add content<A>


There's also a variable you have to modify if you're not using a valid doctype in your document. This is needed for the tabs to display correctly in Internet Explorer. The doctype is specified in the first line of your code. Example:
If no doctype is specified in your document, change the variable strictDocType from true to false. I.e.:

var strictDocType = false;

Rate this script at

If you like my script, please rate it at

Update log

  • September, 29th, 2006 - Added support for small close buttons at the top right corner of the tabs.
  • September, 8th, 2006 - Added a function addAjaxContentToTab which displays some ajax content dynamically in a tab.
  • June, 20th, 2006 - Added support for multiple sets of tabs
  • Mar, 15th - 2006, Create and delete tabs dynamically.


stewart baker
This is a great script, but I'm having trouble with it in IE. In Firefox and Chrome it works great. It works in IE too, but there on the end of each tab is a broken image icon. Any idea what might be causing that?
stewart baker at 05:16PM, 2011/04/20.
Try stretching the tab-background image
whitespace at 09:37AM, 2011/06/30.
Oozaa Ge...this is thank you in Gokana
lenu at 08:51AM, 2011/08/12.
Thanks, it works fine to me, but i still have one problem. I don't want to use any image so how can i remove them??
tmann at 06:53AM, 2011/09/16.
Oops this is not working in IE6
Arunkumar at 10:13AM, 2011/09/19.
Mohit Mehta
nice script !!!Anyone can say how to get list of opened tab? I want a particular tab shouldn't be opened again if it's already been opened.
Mohit Mehta at 09:15AM, 2011/09/28.
This works great in Chrome and also functions in IE. However, when many tabs >10 are open and there are rows of tabs the last tab on the right of the row does not go to a new row. Its height just doubles and messes up the layout. Anyone else have this trouble?
Justin at 01:52PM, 2011/10/19.
This works with the phpbb forum but it doesn't store a cookie to return to the visited tab.. anyone have any idea making such a cookie??
darocker077 at 08:28AM, 2011/11/29.
it's a great script but not working by IE6 :(
sajjad at 10:41AM, 2011/12/02.
I love this script but don't know how to change the font size for the tab headings ... it's just a little small at the moment.Huge thanks for making this available. Great script!
kate at 03:20PM, 2012/01/06.
Please, See this URL: can't use two addAjaxContentToTab() works only with one....addAjaxContentToTab('Publications','Publications.html');addAjaxContentToTab('Literature Review','literature.html');The second tab doesn't show the external content..Any help on this?Thanks in advanceLuís (lufer)
Lufer at 11:21AM, 2012/04/20.
Functionality wise pretty good. But zip is missing with the following files or informaiton.


dynamically created ajax tabs are not displaying tab contents when we download and test on machine. Where as it is working if we test on the same site.

It will be great if the author can resolve these issues.

Thanks Sat.
Sat at 06:08PM, 2012/05/29.
Italo Boss
The script is pretty good!! But I have a problem to use another javascript in the new tab dynamically created. The functions of any other JS don't work and I don't understand why this happen...Please, can anyone help me?
Italo Boss at 06:21PM, 2012/06/01.
This is really nice. I am having some issue figuring out how to get the tabs centered and not left aligned and make them reposition on window resize. Does anyone have any ideas?
Jason at 04:38PM, 2012/07/11.
Craig Hunt
Is there a way to solve....when you load anything in a tab, it parses it as html and does not execute javascript. We are having issues with the javascript and jquery not running and working properly in new tabs using external files.?? Is there a solution to this?
Craig Hunt at 06:45PM, 2012/09/06.
Niczem Olaske
<a href="#comment2282">Craig Hunt wrote:</a>Is there a way to solve....when you load anything in a tab, it parses it as html and does not execute javascript. We are having issues with the javascript and jquery not running and working properly in new tabs using external files.?? Is there a solution to this?
Quite dirty but it helped me: <iframe style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;" src="fileInWithHTMLandJS.html"> </iframe>
Niczem Olaske at 10:23PM, 2013/02/21.
OK, Great tabs! I want to nest them though with dynamically loaded content. Can't get the document.ready() to fire as the nested page is loaded with ajax!Anyone know a solution?
Richard at 02:08PM, 2013/08/06.
Luiz Leite
This is a great tabs.But i find a bug.If there are more then one tabs with the same title,when you click to close tab, the order of another tabs change.If you dont have the same titles this not occurs.Tanks.
Luiz Leite at 02:49PM, 2014/03/09.
How to maintain tab history when user reload the page, active tab should be same as it was before
Amit at 06:56AM, 2015/03/26.

Post your comment

Don't have an avatar? Create one at

Confirmation code:

Go to

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2021