How to close jQuery UI tab using anchor inside it?

Question

I am using collapsible jQuery UI Tabs. My code looks like:

HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab 1 Contents</p>
      <a href="#" class="btn-close">Close</a>
  </div>
  <div id="tabs-2">
     <p>Tab 2 Contents</p>
    <a href="#" class="btn-close">Close</a>
  </div>
  <div id="tabs-3">
     <p>Tab 3 Contents</p>
    <a href="#" class="btn-close">Close</a>
  </div>
</div>

Script

$(function() {
  $( "#tabs" ).tabs({ hide: { effect: "slideUp", duration: 350 },
    show: { effect: "slideDown", duration: 350 },
    collapsible: true,
    active: false,
  });
  $(".btn-close").on( "click", function() {
    $( "#tabs" ).tabs( "option", "hide", { effect: "slideUp", duration: 350 } );
  });
});

I need to collapse opened tab by clicking on "close" anchor but can't figure out how to do it. Can any one tell what I am doing wrong? See above code on JSFiddle.

Answer 1

Unfortunately there is no hide method on the tabs plugin. With the option method you are only changing the setting of the plugin. You have to trigger the click event on the active tab like this:

$(".btn-close").on( "click", function() {
    $("#tabs").find('li.ui-state-active a').trigger('click');
});

(This answer uses the improvements suggested by A.Wolff to remove the dependency to the parent element.)

Here your updated fiddle

Answer 2

Try this:

$(".btn-close").click(function() {
    $( "#tabs" ).tabs( "option", "toggle", { effect: "slideUp", duration: 350 } );
    $(this).parent().hide();
});

Here's fiddle