<!DOCTYPE html>
<html>
<head>
    <title>Adding jQuery Tabs Dynamically</title>

    <link href="http://code.jquery.com/ui/1.9.0/themes/start/jquery-ui.css" rel="Stylesheet" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 

    <script type="text/javascript">
        $(function () {
            $("#divTabs").tabs();
        });

        var tabCounter = 2;  //2 tabs appear by default in this example.

        function AddNewTab(newTabName) {
            tabCounter++;

            var divTabs = $("#divTabs");
            var ul = $("#ulTabs");
            var contentDivId = "divTab" + tabCounter;
            var sampleContent = "<p>Sample content for the " + newTabName + " tab.</p>";

            /*** "Destroy" current tab widget temporarily. (...re-initialized later) ***/
            divTabs.tabs("destroy");

            /*** Add the new LI element for the tab, and point it to the content's id. ***/
            ul.html(ul.html() + "<li><a href='#" + contentDivId + "'>" + newTabName + "</a></li>");

            /*** Add the content that the new tab points to. ***/
            divTabs.html(divTabs.html() + "<div id='" + contentDivId + "'>" + sampleContent + "</div>");

            /*** Re-initialize the tab widget, and make the new tab the "active" one. ***/
            divTabs.tabs({ active: (tabCounter - 1) });
        }

    </script>
</head>
<body style="font-size: 62.5%; font-family: Trebuchet MS, Arial, Helvetica, Verdana, sans-serif;">
    <h1>Adding jQuery Tabs Dynamically</h1>
    <p>Enter a Tab Name and click the button to create a new tab.</p>

    <label for="txtTabName">New Tab Name:</label>
    <input type="text" id="txtTabName" />
    <button onclick="AddNewTab($('#txtTabName').val());">Create Tab</button>
    <br /><br />

    <div id="divTabs" style="width:400px;">
      <ul id="ulTabs">
        <li><a href="#divTab1">Tab 1</a></li>
        <li><a href="#divTab2">Tab 2</a></li>
      </ul>
      <div id="divTab1">
        <p>Sample content for Tab 1.</p>
      </div>
      <div id="divTab2">
        <p>Sample content for Tab 2.</p>
      </div>
    </div>
</body>
</html> 