Home/ Questions/Q 8658825
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T15:51:38+00:00

I am trying to create a jquery UI nested tab dynamically on a button

  • 0

I am trying to create a jquery UI nested tab dynamically on a button click but I can only get the Main tab to work but the Nested doesn’t show properly.
(Note: I dont want to define the nested divs before but create this divs dynamically)
anyone can help?

JSFiddle Link: http://jsfiddle.net/ukalaspurkar/TqF9F/

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body style="font-size:62.5%;">

<div id="tabs">
    <ul>
    </ul>
</div>

    <input type='button' id='addTab' value='Add Main Tab & Nested Tab'>

</body>
</html>



$(function() {

    $("#addTab").click(function() {
        createNestedTabs();
    });

});


function createNestedTabs() {

    //Main Tab..Working fine..
    $("#tabs").append('<div id="mainTab">Main Tab Div</div> ');
    var tabs = $("#tabs").tabs();
    tabs.tabs('add', "#mainTab", "Main Tab");

    //Nested Tab for the above Main Tab..Not working
    $("#tabs").append('<div id="nestedTab1">Nested Tab Div</div> ');
    var nestedTabs = $("#nestedTab1").tabs();
    nestedTabs .tabs('add', "#nestedTab1", "Nested Tab 1");
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re missing some HTML structure for the second div. Even though you’re creating it dynamically you still need some of the same elements as the first one. Try something like this:

    function createNestedTabs() {
    $("#tabs").append('<div id="mainTab">Main Tab Div</div> ');
    var tabs = $("#tabs").tabs();
    tabs.tabs('add', "#mainTab", "Main Tab");


    $("#mainTab").append('<div id="nestedTab1"><ul></ul></div> ');
    $("#nestedTab1").append('<div id="nestedTabContent">Nested tab</div>');
    var nestedTabs = $("#nestedTab1").tabs();
    nestedTabs.tabs('add', "#nestedTabContent", "Nested Tab 1");
}​

    I modified your fiddle to demonstrate.

    • 0