Question

I’m trying to generate tabs (that can also be closed) at the press of a button containing a div. Currently what I’m using to generate the div is:

function addStream(name) {

    if ($("#stream_"+name)[0]!=null) { return; };
    var d=$("<div></div>");
    $(d).attr("id", "stream_"+name);
    $(d).attr("class", "container_small");
    $(d).append("<iframe width='560' height='340' style='border: 0; outline=0' frameborder='0' scrolling='no' src='http://cdn.livestream.com/embed/"+name+"?layout=4&amp;height=340;width=560&amp;autoplay=false'></iframe>");
    $(d).append("<iframe width='300' height='340' style='border: 0; outline=0' frameborder='0' scrolling='no' src='http://cdn.livestream.com/embed/"+name+"?layout=6&amp;height=400&amp;width=300&amp;showTimestamp=true'></iframe>");
    $(d).append("<br><div style=\"display: inline-block; margin: 4px;\"><input type=\"button\" value=\"close\" onclick='removeStream(\""+name+"\")'></input></div>");
    $("#view").append(d);
}

Id just like this information inside of a close-able tab. Excuse my bare-basic knowledge; I’m still learning.

Answer 1

Have you looked at jQueryUI tabs widget?

If you haven’t: stop everything you’re doing and give the examples a test run on your server. Why recreate the wheel, especially such a well-constructed wheel?