TabStrip with Nested Splitter Examples

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div class="tabStrip1">
    <ul>
        <li class="k-state-active">Page Contains Splitter</li>
        <li>Normal</li>
    </ul>
    <div>
        <div class="splitterFortabStrip1">
            <div>
                Content 1
            </div>
            <div>
                Content 2
            </div>
        </div>
    </div>
    <div>
        This is normal page
    </div>
</div>
<div class="tabStrip2">
    <ul>
        <li class="k-state-active">Normal</li>
        <li>Page Contains Splitter</li>
    </ul>
    <div>
        This is normal page
    </div>
    <div>
        <div class="splitterFortabStrip2">
            <div>
                Content 1
            </div>
            <div>
                Content 2
            </div>
        </div>
    </div>
</div>

JavaScript

$(".splitterFortabStrip1").kendoSplitter({
    panes: [
        { collapsible: false },
        {
            collapsible: true,
            resizable: true
        }
    ]
});

$(".splitterFortabStrip2").kendoSplitter({
    panes: [
        {collapsible: false },
        {
            collapsible: true,
            resizable: true
        }
    ]
});

$(".tabStrip1").kendoTabStrip();
$(".tabStrip2").kendoTabStrip();