Resize Chrome Style Stretchy Tabs for jQuery UI

Stretchy Tabs is a Chrome-style tab resizing for jQuery UI tabs that allows you to add, close, drag, and drop buttons to rearrange tabs just like Chrome tabs.

Must Read:  Material UI Touch-Swipe Tabs Component for Vue 3

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">
    <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>
  <div id="tabs-1">
    <p>Content 1</p>
  <div id="tabs-2">
    <p>Content 2</p>
  <div id="tabs-3">
    <p>Content 3</p>

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

$( ".tabpanel" ).tabs({
  closable: true, 
.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

Official Website(adamjimenez): Click Here

This superior jQuery/javascript plugin is developed by adamjimenez. For extra Advanced Usage, please go to the official website.

Related Posts


A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…


A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…


Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…


Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…


jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts. Use data from HTML tables Chartinator is designed…


Customizable & Composable Charts for VueJS | vue-wcharts

WCharts is a library that makes it easy to create your own charts using Vuejs. You can easily create reusable chart components. Use a basic layout or…