How to make use of it:

1. Include the wanted jQuery and jQuery UI libraries on the webpage.

<link rel="stylesheet" href="/path/to/jquery-ui.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to//jquery-ui.min.js"></script>

2. Include the jQuery extensions of your selection after the jQuery library.

<!-- Core -->
<script src="ui.tabs.stretchy-tabs.js"></script>
<link rel="stylesheet" href="ui.tabs.stretchy-tabs.css" />

<!-- Closable Extension -->
<script src="lib/ui.tabs.closable.js"></script>

<!-- Add Tab Extension -->
<script src="lib/ui.tabs.addTab.js"></script>

3. Create a jQuery UI tabs widget on the webpage.

<div class="tabpanel">
  <ul>
    <li><a href="#tabs-1" class="closable">Tab 1</a></li>
    <li><a href="#tabs-2" class="closable">Tab 2</a></li>
    <li><a href="#tabs-3" class="closable">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Content 1</p>
  </div>
  <div id="tabs-2">
    <p>Content 2</p>
  </div>
  <div id="tabs-3">
    <p>Content 3</p>
  </div>
</div>

4. The JavaScript to boost the jQuery UI tabs widget.

$( ".tabpanel" ).tabs({
  closable: true, 
  addTab:true
}).tabs('stretchyTabs')
.find( ".ui-tabs-nav" ).sortable({
  distance: 10
});

5. API strategies.

// add a new tab
$(".tabs").tabs("add", "new tab", "content goes here");

// remove a tab
$(".tabs").tabs("remove", index);

6. Event handlers.

$(".tabs").on("tabsbeforeremove", function(){
  // ...
});

$( ".tabs" ).on("tabsremove", function(){
  // ...
});

$( ".tabs" ).on("tabsadd", function(){
  // ...
});

See Also –

Accessible, Responsive, and Freely Redesign Tabs Plugin | Skeletabs
Easy Communication Between Tabs for Vue 2.x | vue-tabevents
Add Another Vanilla JavaScript Tabbed Content With Equal Height | sv-tabs-js

See Demo And Download