KendoUI Tab Selection issues

This should select the second tab in my tabs page, and it does, but the info from the first tab page is showing instead of the second!

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.kendo.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="myTabStrip">
    <ul>
        <li class="k-state-active">Tab 1</li>
        <li>Tab 2</li>
    </ul>
    <div id="Tab1" class="tab">tab 1 data</div>
    <div id="Tab2" class="tab">tab 2 data</div>
</div>

<p><br>
    The second tab should be selected (it is) <br />
    and it should be showing: "tab 2 data" it is NOT!</p>

CSS

.tab {  height: 100px; }

JavaScript

var tabStrip = $('#myTabStrip').kendoTabStrip({
    animation: {
        open: { effects: "fadeIn" }
    }
});

function selectTab(whichTab) {
    // clear activly selected tab
    var tab;
    
    if (whichTab.toLowerCase() == 'one')
        tab = tabStrip.find('li:eq(0)');
    else
        tab = tabStrip.find('li:eq(1)');

    tabStrip.data("kendoTabStrip").select(tab);
}

$(document).ready(function() {
   selectTab('two'); 
});