Post
Ask Question

Dynamic jQuery Tabs - Add, Update, Delete And Sorting

Introduction

Sometimes, we may need to create/develop some logic in jQuery to add/delete tabs. We will see how easily we can do that using jQuery Tabs and Bootstrap Tabs. It has always been fun to play with jQuery, which is very user-friendly. So let's get started.

Ingredients

  • jQuery (min version of jQuery and UI jQuery JS)
  • jQuery UI (minified version of jQuery UI JS)
  • jQuery UI CSS
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

What Will We Do?

We will perform some basic CRUD operations on a jQuery Tab along with the sorting tab order.

  • Add a Dynamic Tab
  • Delete the Tab
  • Sort Tabs with the Sort Order

HTML

<div class="mainbox">
    <h1>
        <b style="color:#9ee0ff;">jQuery Tab</b> Add, Delete and Sorting Example
    </h1>
    <div id="tabs">
        <ul>
            <li id="1"><a href="#tab-1">Default</a></li>
        </ul>
        <div id="tab-1">
            <p>
                Default Tab Content
            </p>
        </div>
    </div>
    <p>
        <button id="showDialog" class="ui-button ui-widget ui-corner-all">+ Add Tab</button>
        <button id="removeTabs" title="Click to Remove Active Tab" class="ui-button ui-widget ui-corner-all">x Remove Tab</button>
        <button id="showSortable" class="ui-button ui-widget ui-corner-all">Get Sort Order</button>
    </p>
    <p style="margin-top:50px;">
        By Darshan Shah <a href="https://www.c-sharpcorner.com/members/darshan-shah" target="_blank">https://www.c-sharpcorner.com/members/darshan-shah</a>
    </p>
</div>

<div id="divDialog" style="display:none;padding:10px;">
    <div>
        <input type="text" required class="txt" placeholder="Enter new tab name" />
    </div>
    
    <div>
        <button type="button" id="addTabs" class="ui-button ui-widget ui-corner-all">Submit</button>
    </div>
</div>

User Defined CSS

.mainbox {
    width: 70%;
    margin: 0 auto;
    margin-top: 30px;
    font-family: Arial;
}

.mainbox h1 {
    background-color: #808080;
    color: white;
    font-size: 14px;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
}

.mainbox p {
    text-align: center;
}

.ui-widget-overlay.custom-overlay {
    background-color: black;
    background-image: none;
    opacity: 0.7;
    z-index: 1040;
}

.txt {
    border: solid 1px #eee;
    padding: 5px;
    outline: none;
    margin-bottom: 10px;
}

.txt:focus {
    border: solid 1px #0094ff;   
}

Scripts

// Make tab UI activated using below script
var $tabs = $('#tabs').tabs();

// Open jQuery Dialog to open modal popup - here we ask for tab name from user
$("#showDialog").click(function () {
    $("#divDialog input").val("").focus();
    $("#divDialog").dialog({
        title: 'New Tab', modal: true, open: function () {
            $('.ui-widget-overlay').addClass('custom-overlay');
        }
    });
});

// Adding new Tab on button click
$("#addTabs").click(function () {

    // Checking textbox is empty or not
    if ($.trim($("#divDialog input").val()) == "") {
        $("#divDialog input").val("").focus();
    }
    else {

        // Checking tab name already exist or not
        var tabNameExists = false;
        $('#tabs ul li a').each(function (i) {
            if ($.trim(this.text.toLowerCase()) == $.trim($("#divDialog input").val().toLowerCase())) {
                tabNameExists = true;
            }
        });

        // code to insert new tab here if tab name does not exist
        if (!tabNameExists) {

            // Here we are getting max id so that we can assing new id to new tab
            var maxid = 0;
            $('#tabs ul li').each(function () {
                var value = parseInt($(this).attr('id'));
                maxid = (value > maxid) ? value : maxid;
            });

            var newid = maxid + 1;

            // Adding new "<li>" with anchor tag
            $("#tabs ul").append(
                "<li id='" + newid + "'><a href='#tab-" + newid + "'>" + $("#divDialog input").val() + "</a></li>"
            );

            // Adding Div for content for the above "li" tag
            $("#tabs").append(
                "<div style='display:none;' id='tab-" + newid + "'><p>Content for Tab: " + $("#divDialog input").val() + "</p></div>"
            );

            // Refreshing the tab as we have just added new tab
            $("#tabs").tabs("refresh");

            // Make added tab active
            $("#tabs").find('li a[href="#tab-' + newid + '"]').trigger("click");

            $("#divDialog").dialog("close");
        }
        else {
            // Showing message if tab name already exist
            alert("Sorry! Tab name already exist");
            $("#divDialog input").focus();
        }
    }
});


// Remove Active Tab on button click
$("#removeTabs").click(function () {

    // Confirm from user that he/she sure wants to delete this active tab
    if (window.confirm("Are you sure want to delete this active Tab?")) {
        // Find name of Tab by attribute id
        var tabIndex = $("#tabs .ui-tabs-panel:visible").attr("id");

        // Removing Li and as well as content Div for the specific Tab
        $("#tabs").find(".ui-tabs-nav li a[href='#" + tabIndex + "']").parent().remove();
        $("#tabs").find("div[id=" + tabIndex + "]").remove();

        // One removing process done we refresh the tab again
        $("#tabs").tabs("refresh");
    }
});

// Here we are making jQuery Tabs (li tag) Sortable
$(function () {
    $("#tabs ul").sortable({ containment: "#tabs ul" });
    $("#tabs ul").disableSelection();
});

// ************ 2 ways to getting sorting order *************

// We can get sort order directly once you done sort by drag & drop
$("#tabs ul").bind("sortupdate", function (event, ui) {
    event.stopPropagation();
    alert($("#tabs ul").sortable('toArray'));
});

// Another way of getting current sort order of tab using below script
$("#showSortable").click(function () {
    alert($("#tabs ul").sortable('toArray'));
});

Here, we have added all the required source code to make it work.

Notes

  • This is a pure jQuery-based example of jQuery CRUD operation for Tab.
  • Here, I have tried to make the code as much as simple and clean.
  • There are actually many ways to get certain operations done in jQuery but I have chosen some basic and easy ways to understand scripts.

Screens

This is the default screen - we are showing one tab already created here.

Default screen

The popup for adding a new tab will be shown upon a click of the Add Tab button.

Add Tab button

Here we can see a new tab named "Test Tab" has been added successfully.

Test Tab

The Remove Tab button will delete the active or selected tab from the tab list.

Tab list

We ask for confirmation from the user whether we would like to go ahead with this delete action.

Delete action

On approval, we can see a tab named "Profile" has been deleted successfully.

Profile

Here, I have given another feature to sort the tab like the below screen. Just drag & drop.

Another feature

Once drag & drop is done, it will show you the latest tab order. (The ID attribute is being used here).

Latest tab

Another option to get the latest tab order by clicking the button named "Get Sort Order"

Get Sort Order

I hope you liked this article and as a reference, I have attached a single file source code with this article.

Many thanks for reading!


Similar Articles