$(document).ready(function(e) {
var stack = new Array();
$("#documents a").click(function() {
addTab($(this));
});
function addTab(link) {
var name=$(link).attr("rel");
if($("#"+name).length==0){
// add new tab and related content
stack.push(name);
$("#tabs").append("<li class='active' style='display:inline'><button class='btnContent' id='"+name+"'>"+$(link).attr("rel")+"</button> <button class='btnClass'>X</button></li>").show();
$("#content").html("Hello From "+name);
}
}
$(document).on('click', '.btnClass', function(){
closeTab($(this));
});
function closeTab(link){
var name=$(link).siblings().attr("id");
var statusNull = true;
for(var counter=stack.length-1;counter>=0;counter--){
if(stack[counter]==name){
stack[counter]=null;
}
}
for(var counter=stack.length-1;counter>=0;counter--){
if(stack[counter]!=null){
$("#content").html("Hello From "+stack[counter]);
statusNull = false;
break;
}
}
if(statusNull == true){
$("#content").html("");
}
$("#"+name).parent().remove();
}
$(document).on('click', '.btnContent', function(){
addContent($(this));
});
function addContent(link){
var name=$(link).attr("id");
stack.push(name);
$("#content").html("Hello From "+name);
}
});
<body>
<div id="doclist">
<table>
<tr>
<td>
<h2>Documents</h2>
<ul id="documents">
<li><a href="#" rel="Document1" title="This is the content of Document1">Document1</a></li>
<li><a href="#" rel="Document2" title="This is the content of Document2">Document2</a></li>
<li><a href="#" rel="Document3" title="This is the content of Document3">Document3</a></li>
<li><a href="#" rel="Document4" title="This is the content of Document4">Document4</a></li>
<li><a href="#" rel="Document5" title="This is the content of Document5">Document5</a></li>
</ul></div><div id="wrapper">
</td>
<td align="left">
<table>
<tr>
<td> <ul id="tabs"><!-- Tabs go here --> </ul></td>
</tr>
<tr>
<td colspan="5" align="center" width="1000px"><div id="content"><!-- Tab content goes here --></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>