Bootstrap Tabs: Add, Remove, Reposition

For reasons that I have to work to build the Bootstrap Tab feature: add, remove, reposition, rename, … In this article, I will guide you to add, remove and reposition tabs.

You can see Demo , watch video below or download full source in end post:

Bootstrap Tab default

First, we create bootstrap tab as usual:

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <p>
            <button type="button" class="btn btn-primary pull-right">Add Tab</button>
            </p>
            <!-- Nav tabs -->
            <ul id="tab-list" class="nav nav-tabs" role="tablist">
                <li class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane fade in active" id="tab1">Content Tab 1</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

This above code use CDN of Bootstrap & Jquery, you can modify url to your library. You will receive, currently, you click the Add Tab button, nothing will happen

Add, Remove Tabs

Please insert below script:

<script type="text/javascript">
    $(document).ready(function () {
        var tabID = 1;
        $('#btn-add-tab').click(function () {
            tabID++;
            $('#tab-list').append($('<li><a href="#tab' + tabID + '" role="tab" data-toggle="tab">Tab ' + tabID + '<button class="close" type="button" title="Remove this page">×</button></a></li>'));
            $('#tab-content').append($('<div class="tab-pane fade" id="tab' + tabID + '">Tab '+ tabID +' content</div>'));
        });
        $('#tab-list').on('click','.close',function(){
            var tabID = $(this).parents('a').attr('href');
            $(this).parents('li').remove();
            $(tabID).remove();

            //display first tab
            var tabFirst = $('#tab-list a:first');
            tabFirst.tab('show');
        });
    });</script>

When you click Add Tab button, tabID++ and append to #tab-list and #tab-content
When you click .close, this corresponds tab & tab content will be removed, and then displays the contents of the first tab

At this point, you can add and remove Bootstrap tabs.

Reposition Tabs

To be able to reposition tabs, there are many libraries support this. I introduce to you a JavaScript library: Sortable. You can see a few demos of this library here. The reason I like this library because it is a pure JavaScript library, jQuery is not required. You can use it in a useful way elsewhere.

Use this library to reposition tabs is simple, you just need to add the following two lines in the script above

var list = document.getElementById("tab-list");
new Sortable(list);

You can download full source code here: Download