splitter is undefined

[Tony]

I am trying to establish the basics with the splitter.

I have have three panes and am trying to load a page into the middle pane and then resize the spliiter tp fit the content.

When I call

var splitter = $("#splitter").data("kendoSplitter");
 // expand the pane with ID, pane1
splitter.expand("#mainContent");

I get a "splitter is undefined" error. 

Here is the code...

<div align="center">
        <div id="splitter" style="border-color:white; margin:1px; width:80%" align="center">
            <div id="menu">Area 1</div>
            <div id="mainContent">Area 2</div>
            <div id="rightCol">Area 3</div>
        </div>
    </div>

<a href="#" onclick="test()">Expand</a>

 $("#splitter").kendoSplitter({
                panes: [
                    { size: "100px", collapsible: false, min: "100px", max: "110px", resizable: false },
                    { size: "700px", min: "300px",  contentUrl: "../default.aspx"},
                    { size: "100px", collapsible: false, min: "100px", max: "110px", resizable: false }
                ],
                orientation: "horizontal"
            })

function test() {
            var splitter = $("#splitter").data("kendoSplitter");
            // expand the pane with ID, pane1
            splitter.expand("#mainContent");
        }

I am seeing a few other posts about resizing to fit contents, can it be done this way or do you need to resize from the loaded page to the parent?

Cheers