Closable Tabs for jQuery UI
Switch branches/tags
Nothing to show
Pull request Compare This branch is 4 commits ahead of andrewwatts:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Closable Tabs for jQuery UI

An unobtrusive way to add a close button to jQuery UI tabs.


Demo of the close button functionality at

How To Use

  1. Follow the instructions on the jQuery UI Tabs site and include the necessary jQuery and jQuery UI files. Then read through the overview at the jQuery UI Tabs site to get an idea of what is possible.

  2. Include the javascript file in your html file or js loader. eg:

     <script type="text/javascript" src="ui.tabs.closable.min.js"></script>
  3. add a closable option when instatiating the tabs:

     $('#tabs').tabs({closable: true})
  4. (optional) If you wish to receive a callback when the close button is clicked you can add a closableClick function to the tab options:

         closable: true,
         closableClick: function(event, ui) {
             // return true to allow the remove of the tab
             // return false to prevent the remove
  5. (optional) To set some not closable tabs just add class="tab-notclosable" class to the <li> element

     <div id="tabs">
             <li class="tab-notclosable"><a href="#my-notclosable-tab">My Tab</a></li>
         <div id="my-notclosable"></div>

That's it, about as unobtrusive as I could make it.