## Properties

Name | Type | Default
--- | --- | ---
width | Number/String | null
Sets the splitter width. #### Code examples Initialize a jqxSplitter with the `width` property specified.
    $('#jqxSplitter').jqxSplitter({width: '200px'});
height | Number/String | null
Sets the splitter's height. #### Code examples Initialize a jqxSplitter with the `height` property specified.
    $('#jqxSplitter').jqxSplitter({ height:"300px" });
panels | Array | []
Sets or get's panels properties. #### Code examples Initialize a jqxSplitter with the `panels` property specified.
    $('#jqxSplitter').jqxSplitter(
        {panels:[
        { min: 300, max:'450px', size: 330,
            collapsible: false, collapsed: false, resizable: true },
        { min: 100, max:'550px',
            collapsible: true, collapsed: false, resizable: true }]});
orientation | String | 'horizontal'
Sets or get's splitter's orientation. #### Code examples Initialize a jqxSplitter with the `orientation` property specified.
    $('#jqxSplitter').jqxSplitter({orientation:"vertical"});
cookies | Bool | false
Sets or get's whether the splitter layout is going to be saved in cookies on it's change. #### Code examples Initialize a jqxSplitter with the `cookies` property specified.
    $('#jqxSplitter').jqxSplitter({cookies: true});
cookieOptions | Object | {}
Sets or get's cookies options. #### Code examples Initialize a jqxSplitter with the `cookieOptions` property specified.
    $('#jqxSplitter').jqxSplitter({cookieOptions: {domain: 'jqwidgets.com', expires: 90}});
enableCollapseAnimation | Bool | true
Sets or gets whether the collapse animation is enabled. #### Code examples Initialize a jqxSplitter with the `enableCollapseAnimation` property specified.
    $('#jqxSplitter').jqxSplitter({enableCollapseAnimation: false});
animationDuration | Number | 100
Sets or gets the animation duration. #### Code examples Initialize a jqxSplitter with the `animationDuration` property specified.
    $('#jqxSplitter').jqxSplitter({animationDuration: 300});
disabled | Boolean | false
Gets or sets whether the splitter is disabled. #### Code examples Initialize a jqxSplitter with the `disabled` property specified.
    $('#jqxSplitter').jqxSplitter({ disabled:true });
splitBarSize | Number/String | 5
Gets or sets splitbar's size. #### Code examples Initialize a jqxSplitter with the `splitBarSize` property specified.
    $('#jqxSplitter').jqxSplitter({ splitBarSize: '15px' });
touchSplitBarSize | Number/String | 15
Gets or sets splitbar's size when a touch device is used. #### Code examples Initialize a jqxSplitter with the `touchSplitBarSize` property specified.
    $('#jqxSplitter').jqxSplitter({ touchSplitBarSize: '15px' });
## Events
resize | Event |
Resize event is triggered when panels are resized. #### Code examples Bind to the resize event by type: jqxSplitter.
    $('#jqxSplitter').bind('resize', function (event) { // Some code here. });
expanded | Event |
Expanded is triggered when any panel have been expanded. #### Code examples Bind to the expanded event by type: jqxSplitter.
    $('#jqxSplitter').bind('expanded', function (event) { // Some code here. });
resizeStart | Event |
Resize start is triggered when any split bar start being dragged. #### Code examples Bind to the resizeStart event by type: jqxSplitter.
    $('#jqxSplitter').bind('resizeStart', function (event) { // Some code here. });
collapsed | Event |
Collapsed event is triggered when any panel have been collapsed. #### Code examples Bind to the collapsed event by type: jqxSplitter.
    $('#jqxSplitter').bind('collapsed', function (event) { // Some code here. });
## Methods
exportLayout | Method |
Exporting the current panel's state into a JSON string. #### Code example Invoke the exportLayout method.
     $('#jqxSplitter').jqxSplitter('exportLayout');
importLayout | Method |
Setting splitter layout with a JSON string. #### Code example Invoke the importLayout method.
    $('#jqxSplitter').jqxSplitter('setTitle', '
        { "panels": [
        {"max":"200","min":"100","collapsible":"false","resizable":"true",
            "collapsed":"false","size":"100" },
        {"collapsible":"true","resizable":"true",
            "collapsed":"false","size":"150" },
        {"min":"0","collapsible":"true","resizable":"true",
            "collapsed":"false","size":"10" },
        {"min":"0","collapsible":"true","resizable":"true",
            "collapsed":"false","size":"1319" }],
        "orientation": "horizontal" }');
expandAt | Method |
Expanding specific panel if it's allready have been collapsed. #### Code example Invoke the expandAt method.
    $('#jqxSplitter').jqxSplitter('expandAt', 3);
collapseAt | Method |
Collapsing specific panel if it's expanded. #### Code example Invoke the collapseAt method.
    $('#jqxSplitter').jqxSplitter('collapseAt', 3);
disable | Method |
Disabling the splitter #### Code example Invoke the disable method.
    $('#jqxSplitter').jqxSplitter('disable');
enable | Method |
Enabling the splitter #### Code example Invoke the enable method.
    $('#jqxSplitter').jqxSplitter('enable');
refresh | Method |
Updates the splitter's layout #### Code example Invoke the refresh method.
    $('#jqxSplitter').jqxSplitter('refresh');
showCollapseButtonAt | Method |
Showing collapse button on specific split bar. #### Code example Invoke the showCollapseButtonAt method.
    $('#jqxSplitter').jqxSplitter('showCollapseButtonAt', 1);
hideCollapseButtonAt | Method |
Hiding collapse button on specific split bar. #### Code example Invoke the hideCollapseButtonAt method.
    $('#jqxSplitter').jqxSplitter('hideCollapseButtonAt', 1);