In this tutorial, we will learn JQuery UI Tabs Simple Manipulation Example


Example :

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Tabs - Simple manipulation</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        .content{
            margin:40px auto;
            width:600px;
        }
        #dialog label, #dialog input { 
            display:block; 
        }
        #dialog label { 
            margin-top: 0.5em; 
        }
        #dialog input, #dialog textarea { 
            width: 95%; 
        }
        #tabs { 
            margin-top: 1em; 
        }
        #tabs li .ui-icon-close { 
            float: left; 
            margin: 0.4em 0.2em 0 0; 
            cursor: pointer; 
        }
        #add_tab { 
            cursor: pointer; 
            background:green;
            color:#fff;
            border:1px solid green;
        }
        h2{
            text-align: center;
        }
        body{
            background-color: #f7f267;
        }
    </style>
</head>
<body>
    <h2>JQuery UI Tabs Simple manipulation Example- rathorji.in</h2>
    <div class="content">
        <div id="dialog" title="Tab data">
            <form>
                <fieldset class="ui-helper-reset">
                    <label for="tab_title">Title</label>
                    <input type="text" name="tab_title" id="tab_title" value="Tab Title" class="ui-widget-content ui-corner-all">
                    <label for="tab_content">Content</label>
                    <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all">Tab content</textarea>
                </fieldset>
            </form>
        </div>
        <button id="add_tab">Add Tab</button>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Tab 1</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
            </ul>
            <div id="tabs-1">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
    </div>
</body>
<script>
    $( function() {
        var tabTitle = $( "#tab_title" ),
        tabContent = $( "#tab_content" ),
        tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
        tabCounter = 2;
        var tabs = $( "#tabs" ).tabs();
        // Modal dialog init: custom buttons and a "close" callback resetting the form inside
        var dialog = $( "#dialog" ).dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                Add: function() {
                    addTab();
                    $(this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                form[ 0 ].reset();
            }
        });
 
        // AddTab form: calls addTab function on submit and closes the dialog
        var form = dialog.find( "form" ).on( "submit", function( event ) {
            addTab();
            dialog.dialog( "close" );
            event.preventDefault();
        });
    
        // Actual addTab function: adds new tab using the input from the form above
        function addTab() {
            var label = tabTitle.val() || "Tab " + tabCounter,
            id = "tabs-" + tabCounter,
            li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
            tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
 
            tabs.find( ".ui-tabs-nav" ).append( li );
            tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
            tabs.tabs( "refresh" );
            tabCounter++;
        }
 
        // AddTab button: just opens the dialog
        $( "#add_tab" )
            .button()
            .on( "click", function() {
            dialog.dialog( "open" );
        });
 
        // Close icon: removing the tab on click
        tabs.on( "click", "span.ui-icon-close", function() {
            var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
        });
 
        tabs.on( "keyup", function( event ) {
            if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
                var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
        tabs.tabs( "refresh" );
        }
        });
    });
</script>
</html>

May this example help you.