dynamic jquery tabs add update

You can dynamically add, update, and delete jQuery tabs. Here’s a basic example of how you can do it:

// Initialize the tabs
var $tabs = $('#tabs').tabs();

// Add a new tab
var tabTitle = "New Tab";
var tabContent = "Content for new tab";
var tabTemplate = "
#{label}
";
var id = "tabs-" + tabCounter;
var li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, tabTitle));
var tabContentHtml = tabContent || "Tab " + tabCounter + " content.";
$tabs.find(".ui-tabs-nav").append(li);
$tabs.append("
" + tabContentHtml + "
");
$tabs.tabs("refresh");

// Update a tab
var index = 0; // Index of the tab you want to update
var newTitle = "Updated Title";
var newContent = "Updated content";
$tabs.find(".ui-tabs-nav li:eq(" + index + ") a").text(newTitle);
$tabs.find(".ui-tabs-panel:eq(" + index + ")").html("
" + newContent + "
");

// Delete a tab
var index = 0; // Index of the tab you want to delete
$tabs.find(".ui-tabs-nav li:eq(" + index + ")").remove();
$tabs.find(".ui-tabs-panel:eq(" + index + ")").remove();
$tabs.tabs("refresh");

 

This code initializes a set of jQuery tabs, adds a new tab with a specified title and content, updates the title and content of an existing tab, and deletes a tab12.

Please note that as of jQuery UI 1.9, the add and remove methods have been deprecated and in jQuery UI 1.10 they have been removed2. The refresh method is used instead2.

Remember to replace the tabTitle, tabContent, and index variables with your own values. Also, ensure that jQuery and jQuery UI are properly included in your project1.

Ref Link : https://www.c-sharpcorner.com/article/dynamic-jquery-tabs-add-update-delete-and-sorting/
Thanks