Kendo UI Splitter - toggle pane

by Ganesh_Babu_469

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1030/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1030/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1030/js/kendo.web.min.js"></script>
<p>
    <button id="collapsePane" type="button" class="k-button">Collapse left pane</button>
    <button id="expandPane" type="button" class="k-button">Expand left pane</button>
</p>
<div id="splitter">
    <div id="left">Left column</div>
    <div>Main content</div>
</div>

CSS

html {
    font: 12px sans-serif;
}

JavaScript

var splitterElement = $("#splitter").kendoSplitter({
    panes: [{
        size: "15%",
        resizable: false
    }, {
        size: "85%",
        resizable: false,
        collapsible: false, /*Default is TRUE*/
    }]
});


var splitter = splitterElement.data("kendoSplitter");

$("#collapsePane").click(function (e) {
    var splitter = $("#splitter").data("kendoSplitter");
    splitter.options.panes[0].collapsible = true;  /*How to change this property?*/
    splitter.collapse("#left");
});

$("#expandPane").click(function (e) {
    var splitter = $("#splitter").data("kendoSplitter");
    splitter.expand("#left");
});