Add close button to jquery ui tabs?

jquery jquery-ui tabs jquery-tabs

19,723

Solution 1

Here ya go...

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#tabs" ).tabs();
    $(".ui-closable-tab").live( "click", function() {
        var tabContainerDiv=$(this).closest(".ui-tabs").attr("id");
        var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
        $( "#" + panelId ).remove();
        $("#"+tabContainerDiv).tabs("refresh");
        var tabCount=$("#"+tabContainerDiv).find(".ui-closable-tab").length;
        if (tabCount<1) {
            $("#"+tabContainerDiv).hide();
        }
    });
  });
  </script>
  <style>
  .ui-icon-circle-close {
    cursor:pointer;
  }
  </style>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a><span class='ui-icon ui-icon-circle-close ui-closable-tab'></span></li>
    <li><a href="#tabs-2">Proin dolor</a><span class='ui-icon ui-icon-circle-close ui-closable-tab'></span></li>
    <li><a href="#tabs-3">Aenean lacinia</a><span class='ui-icon ui-icon-circle-close ui-closable-tab'></span></li>
  </ul>
  <div id="tabs-1">
    <p>Tab 1 Content</p>
  </div>
  <div id="tabs-2">
    <p>Tab 2 Content</p>
  </div>
  <div id="tabs-3">
    <p>Tab 3 Content</p>
  </div>
</div>
</body>
</html>

Demo: JS FIDDLE

Solution 2

I know this is an old post but with the latest JQuery this can be done easily:

Close button sample

19,723

user782104

php

Updated on June 04, 2022

Comments

user782104 almost 2 years
By default the jquery ui tabs dialog do not have a button of close as the dialog box? How to add one on it? The close button i refering is the one in the main dialog box but not sub-tabs, thanks.
```
$( "#tabs" ).tabs({open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog || ui).show();}); 
```
Adam Plocher over 10 years

Nice solution. This will work with newer versions of JQuery if you change the live function to on.
Popnoodles over 9 years

This is a link-only answer.