jQuery UI Tabs Example

A simple example showing how to use jQuery UI's tabs

HTML

<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<div id="tabs">
    <ul>
        <li id="tab-head-1"><a href="#tabs-1">Tab 1</a>
        </li>
        <li id="tab-head-2"><a href="#tabs-2">Tab 2</a>
        </li>
        <li id="tab-head-3"><a href="#tabs-3">Tab 3</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>Content for Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Content for Tab 2</p>
    </div>
    <div id="tabs-3">
        <p>Content for Tab 3</p>
    </div>
</div>
<div id="tabid"></div>
<div id="btnHideTab2">Hide Tab 2</div>
</div>

<h1>
Steps to reproduce:
</h1>
<ul>
  <li>- Click Hide Tab 2</li>
  <li>- Click Tab 1 header</li>
  <li>- Press right-arrow key</li>
  <li>- Contents of Tab2 is shown, even though it it supposed to be hidden</li>
</ul>

CSS

body {
    background-color: #eef;
}
#tabs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
/* Note that jQuery UI CSS is loaded from Google's CDN in the "Add Resources" pane to the left.  Normally this would be done in your <head> */

JavaScript

$("#tabs").tabs({
    activate: function (event, ui) {
        var active = $('#tabs').tabs('option', 'active');
        $("#tabid").html('the tab id is ' + $("#tabs ul>li a").eq(active).attr("href"));

    }
}

);

$("#btnHideTab2").button().on("click", function () 
{
	$("#tab-head-2").hide();
  $("#tabs-2").hide();
})