Dynamic creation of tabs with iframe
 

I am new to jquery. I am creating tabs dynamically when an user clicks on a menu item. It works just fine with 3 tabs. when the tab count exceeds 3 and if i click on a previous tab it doesn't work properly.It shows the current iframe and the previous iframe.Both iframes are visible.

Here i am creating the tabs dynamically with the jquery & Html/CSS.

Can any one help me out in this issue..

Here is the coding.......

[CODE]

=========================================================
Script Part
=========================================================

/*Creation of tab*/

function addTab(link,ct) {

// If tab already exist in the list, return

if ($("#" + $(link).attr("rel")).length != 0)

return;

// hide other tabs

$("#tabs li").removeClass("current");

if(ct>1)
{
for(i=ct-1;i>0;i--)
{
fr = document.getElementById (i);

if (fr.style.display!='none'){

fr.style.display="none";

}

}

}

// add new tab and related content

$("#tabs").append("<li class='current'><a class='tab' id='"

+ $(link).attr("rel") + "' name='"+ct+"' href='" +

$(link).attr("href") + "' target='" +

$(link).attr("target") + "'>" + $(link).html() + "</a><a

name ='"+ct+"' href='http://bytes.com/submit/g/' class='remove' >x</a></li>");

var e = $('<div class="dcontent" ><li style="list-

style:none;"><iframe id="'+ct+'"

src='+$(link).attr("href")+' name="content" align="middle"

width=800px; height=600px;> </iframe></li></div>');

$('#content').append(e);

}


/*Make the current tab content to visible*/

$('#tabs a.tab').live('click', function() {
// Get the tab name

var contentname = $(this).attr("id") + "_content";

var ifid=$("#content .dcontent:last

iframe").attr("id");

// hide all other tabs

if(ifid>1)
{
for(i=ifid;i>0;i--)
{
fr = document.getElementById (i);

if (fr.style.display!='none')

{
fr.style.display="none";
}
}
}

//make the current frame visible

var lnm=$(this).attr("name");

fr = document.getElementById (lnm);

if (fr.style.display!='block')
{
fr.style.display="block";
}

$("#tabs li").removeClass("current");

// show current tab

$("#" + contentname).show();

$(this).parent().addClass("current");

});

=========================================================
HTML Part
=========================================================
<ul id="tabs"> <div style="float: left;"> <ul id="menu"> <li> <a href="http://bytes.com/submit/g/">Next</a> <ul id="documents"> <li><a href="http://bytes.com/tab1.html" target="content"

rel="1">Document1</a></li> <li><a href="http://bytes.com/tab2.html" rel="5"

target="content">Document2 </a></li> <li><a href="http://bytes.com/tab3.html"

rel="3" target="content">Document3 </a></li> <li><a href="http://bytes.com/tab4.htm" rel="4"

target="content">Document4 </a></li> </ul> </li> </ul> </div> </ul> <div id="content"> </div>
[ICODE]

There are things missing, maybe the css, don't know but this is not working for me. The jquery is not working at all.
There are a few things you should be aware of:
Not sure you understand the rel attribute for anchors, read this:http://www.w3schools.com/TAGS/att_a_rel.asp
You do not have an iframe in your code. is a div.
is an iframe.
Read this on target attribute http://www.w3schools.com/tags/att_a_target.asp
Your top ul and the div following are not necessary:
In order to get this to work I had to de-activate my FireFox tab plus options. I open everything in another browser tab. Your code would not work with my settings. That's the trouble with iframes.

When posting, your in the message box, just above that is a tool menu. Use the '#' hash mark to generate the tags you need to put your code into.