Mobile TabStrip - hide/show tabset

Onclick of Settings tabstrip icon hides Home tabstrip and displays Settings tabstrip via CSS changes and grabbing the HREF from anchor tags.

by acforbes

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css">
<div data-role="view" id="tabstrip-home" data-title="Home" data-layout="mobile-tabstrip">
Home
    <p>Home - Stay on the current tabstrip and display text within the tabstrip-home view.</p>
    <p>Calendar - Stay on the current tabstrip and display text within the tabstrip-calendar view.</p>
    <p>Customers - load the customer.htm file into the tabstrip-customers view (no file reference in this jsfiddle, so nothing happens as expected).</p>
    <p>Settings - Change the tabstrip to a new Settings tabstrip set and display text within the tabstrip-settings view.</p>

    <p>Problems: The tabstrip either disappears (probably bug with fadeOut/fadeIn) or does not highlight the proper button.</p>
</div>

<div data-role="view" id="tabstrip-calendar" data-title="Calendar" data-layout="mobile-tabstrip">
Calendar
</div>

<div data-role="view" id="tabstrip-customers" data-title="Customers" data-layout="mobile-tabstrip">
Customers
</div>

<div data-role="view" id="tabstrip-settings" data-title="Settings" data-layout="mobile-tabstrip">
Settings
    <p>Note that the tabstrip disappears when clicking Home again (first icon clicked after getting here), which appears to just be a hide/show bug in the code.</p>
</div>

<div data-role="view" id="tabstrip-profile" data-title="Profile" data-layout="mobile-tabstrip">
Profile
</div>

<div data-role="view" id="tabstrip-users" data-title="Users" data-layout="mobile-tabstrip">
Users
</div>

<div data-role="layout" data-id="mobile-tabstrip">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
        </div>
...

CSS

#footer-tabs-settings { display: none;}
p { font-weight: normal; margin: 10px 5px; }

JavaScript

var app = new kendo.mobile.Application(document.body);

  function tabSelect(e) {
    //e.preventDefault();
    var tabSet = $(e.item).parent();
    var switchToTabID = $(e.item).attr("tabset");
    if (switchToTabID) {
      var switchToHref = $(e.item).attr("href");
      var tabSet2 = $("#" + switchToTabID);
      tabSet.fadeOut("fast", function() {
        tabSet2.fadeIn("fast");
       tabSet2.data("kendoMobileTabStrip").switchTo(switchToHref);
      });
    }
  }