add tabs with dynamic content

Question

hi when i click on option of the list i want add new tab which is have dynamic content. content get by given href url.

<script type="text/javascript" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/dynamic_tabs/jquery-1.4.min.js" ></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#documents a").click(function() {
            addTab($(this));
        });

        $('#tabs a.tab').live('click', function() {
            // Get the tab name
            var contentname = $(this).attr("id") + "_content";

            // hide all other tabs
            $("#content p").hide();
            $("#tabs li").removeClass("current");

            // show current tab
            $("#" + contentname).show();
            $(this).parent().addClass("current");
        });

        $('#tabs a.remove').live('click', function() {
            // Get the tab name
            var tabid = $(this).parent().find(".tab").attr("id");

            // remove tab and related content
            var contentname = tabid + "_content";
            $("#" + contentname).remove();
            $(this).parent().remove();

            // if there is no current tab and if there are still tabs left, show the first one
            if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {

                // find the first tab    
                var firsttab = $("#tabs li:first-child");
                firsttab.addClass("current");

                // get its link name and show related content
                var firsttabid = $(firsttab).find("a.tab").attr("id");
                $("#" + firsttabid + "_content").show();
            }
        });
    });
    function addTab(link) {
        // If tab already exist in the list, return
        if ($("#" + $(link).attr("rel")).length != 0)
            return;

        // hide other tabs
        $("#tabs li").removeClass("current");
        $("#content p").hide();

        // add new tab and related content
        $("#tabs").append("<li class='current'><a class='tab' id='" +
            $(link).attr("rel") + "' href='#'>" + $(link).html() + 
            "</a><a href='#' class='remove'>x</a></li>");

        $("#content").append("<p id='" + $(link).attr("rel") + "_content'>" + 
            $(link).attr("href") + "</p>");

        // set the newly added tab as current
        $("#" + $(link).attr("rel") + "_content").show();
    }
</script>

this is my html code

<div id="main">
<div id="doclist">
    <h2>Documents</h2>
    <ul id="documents">
        <li><a href="#" rel="Document1" title="This is the content of Document1">Document1</a></li>
        <li><a href="http://www.dynamicdrive.com" rel="Document2" title="This is the content of Document2">Document2</a></li>
        <li><a href="http://www.dynamicdrive.com" rel="Document3" title="This is the content of Document3">Document3</a></li>
        <li><a href="http://www.dynamicdrive.com" rel="Document4" title="This is the content of Document4">Document4</a></li>
        <li><a href="http://www.dynamicdrive.com" rel="Document5" title="This is the content of Document5">Document5</a></li>
    </ul>
</div>
<div id="wrapper">
    <ul id="tabs">
        <!-- Tabs go here -->
    </ul>
    <div id="content">
        <!-- Tab content goes here -->
    </div>
</div>
</div>
<div id="Document1" style="display:none;">anvdsanvidsnvsidvnsdovnsdoivnsdovsdovnsovsvsmvpsmvlksdvsmdkvmsdkvmsvsd</div>

it's working but i don't want like this. i want display content which i mention in href. please help me how can i do it.

Answer 1

It basically depends on what type of data you are receiving from the url on what kind of request. Assuming that you simply want to display a HTML page you can append an iframe as follows.

HTML

<div class="dynamic_content">
    <ul class='url_list'>
        <li><a href='#' data="http://www.example.com">Load Example</a></li>
    </ul>
</div>

jQuery

$(document).ready(function(){
    $('ul.url_list > li > a').click(function(){
        var me = $(this);
        var url = me.attr('data'); 
        $('.dynamic_content > iframe').remove();
        $('.dynamic_content').append('<iframe src="' + url + '" width="100%" height="300px"></iframe>');
    });
});

Also, please note i have not tested the above code. It's something just from the top of my mind so you might need to test it.

Update:

Ok, I have updated and tested the code. Also, here is a working example (JSFiddle)

Update:

Here is an updated JSFiddle