This will allow you to keep toggling the size of A between 70 and 100%. Live example:
http://jsfiddle.net/LX484/
HTML:
<
div
id
=
"log"
>
<
button
id
=
"toggle"
>Toggle A's size</
button
>
</
div
>
<
div
class
=
"k-content"
>
<
div
class
=
"a"
>A</
div
>
<
div
class
=
"b"
>B</
div
>
</
div
>
JS:
$(
function
() {
setupSplitters();
$(
'#toggle'
).click(
function
() {
var
splitter = $(
'.k-content'
).data(
'kendoSplitter'
);
var
curSize = splitter.size(
'.a'
);
splitter.size(
'.a'
, curSize ===
'100%'
?
'70%'
:
'100%'
);
});
});
function
setupSplitters() {
$(
'.k-content'
).kendoSplitter({
orientation:
'horizontal'
,
panes: [
// A
{
resizable:
true
, collapsible:
false
, max:
'90%'
, min:
'33%'
, size:
'70%'
},
// B
{
resizable:
true
, collapsible:
false
, max:
'67%'
, min:
'10%'
,size:
'30%'
}]
});
}