I use jQuery UI tabs a lot in my web application development because they are simple and do not provide a lot of unnecessary or bloaty features, they are just plain tabs. It is easy and intuitive to dynamically add tabs with the add method. And, fairly easy to remove tabs with the remove method. However, one large downside that I’ve faced over and over is finding a way for a user to trigger the removal of a tab with a close button on the tab like:

The reason, it’s difficult, is the capability is neither there by default nor by option and jQuery UI tabs are not the easiest plugin to extend. So, in the past, I have hacked such close buttons into my applications after the tabs have fully rendered. And I’ve also searched google for a clean solution, but I never really found an unobtrusive way to add a close button to the tabs in jQuery UI.

So, I wrote one.

There is a demo available and the source can be downloaded from github. After you have the source, here are the steps to use it:

1. include your jquery and jquery ui javascript, then include ui.tabs.closable.min.js in your html or with your javascript loader. eg:

        <script type="text/javascript" src="jquery.min.js"></script> 
        <script type="text/javascript" src="jquery-ui.min.js"></script>
        <script type="text/javascript" src="ui.tabs.closable.min.js"></script>

2. Add a closable option when instantiating the tabs:

        $('#tabs').tabs({closable: true})

When successful, all your tabs will have a close button like the above image.