## Properties

Name | Type | Default
--- | --- | ---
disabled | Boolean | false
Sets or gets the disabled property. #### Code examples Set the `disabled` property.
    $('#jqxSplitter').jqxSplitter({ disabled: true });
Get the `disabled` property.
    var disabled = $('#jqxSplitter').jqxSplitter('disabled');
Try it: disabled is set to true
height | Number/String | 300
Sets or gets the jqxSplitter's height. #### Code examples Set the `height` property.
    $("#jqxSplitter").jqxSplitter({ height: 250});
Get the `height` property.
    var height = $('#jqxSplitter').jqxSplitter('height');
Try it: height is set to '300px'
orientation | String | 'vertical'
Sets or gets the orientation property. #### Code examples Set the `orientation` property.
    $('#jqxSplitter').jqxSplitter({ width: 600, height: 480, orientation: 'horizontal', panels: [{ size: 300 }, { size: 300}] });
Get the `orientation` property.
    var orientation = $('#jqxSplitter').jqxSplitter('orientation');
Try it: orientation is set to 'horizontal'
panels | Array | []
Sets or gets the panels property. Each panel represents an Object with the following fields. size - sets the panel's size. min - sets the panel's minimum size. collapsible - sets whether the panel is collapsible. collapsed - sets whether the panel is collapsed. #### Code examples Set the `panels` property.
    $('#jqxSplitter').jqxSplitter({ width: 600, height: 480, panels: [{ size: 300 }, { size: 300}] });
Get the `panels` property.
    var panels = $('#jqxSplitter').jqxSplitter('panels');
Try it: panels is set to a custom array
resizable | Boolean | true
Sets or gets the resizable property. When this property is set to false, the user will not be able to move the split bar. #### Code examples Set the `resizable` property.
    $('#jqxSplitter').jqxSplitter({ resizable: false });
Get the `resizable` property.
    var resizable = $('#jqxSplitter').jqxSplitter('resizable');
Try it: resizable is set to false
splitBarSize | Number/String | 5
Sets or gets the size of the split bar. #### Code examples Set the `splitBarSize` property.
    $('#jqxSplitter').jqxSplitter({ splitBarSize: 15 });
Get the `splitBarSize` property.
    var splitBarSize = $('#jqxSplitter').jqxSplitter('splitBarSize');
Try it: splitBarSize is set to 10
showSplitBar | Boolean | true
Sets or gets whether the split bar is displayed. #### Code examples Set the `showSplitBar` property.
    $('#jqxSplitter').jqxSplitter({ showSplitBar: false });
Get the `showSplitBar` property.
    var showSplitBar = $('#jqxSplitter').jqxSplitter('showSplitBar');
Try it: showSplitBar is set to false
theme | String | ''
- Sets the widget's theme. jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following: Include the theme's CSS file after jqx.base.css. The following code example adds the 'energyblue' theme.

      <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
      <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
Set the widget's theme property to 'energyblue' when you initialize it. Try it: theme is set to 'energyblue'
width | Number/String | 300
Sets or gets the jqxSplitter's width. #### Code examples Set the `width` property.
    $("#jqxSplitter").jqxSplitter({ width: 250});
Get the `width` property.
    var width = $('#jqxSplitter').jqxSplitter('width');
Try it: width is set to '300px'
## Events
collapsed | Event |
This event is triggered when a panel is collapsed. #### Code example Bind to the `collapsed` event by type: jqxSplitter.
    $('#jqxSplitter').on('collapsed',
    function (event) {
        var panels = event.args.panels;
        // get first panel.
        var panel1 = panels[0];
        // get second panel.
        var panel2 = panels[1];
        // panel index.
        var index = event.args.index;
    });
Try it: Bind to the collapsed event by type: jqxSplitter.
expanded | Event |
This event is triggered when a panel is expanded. #### Code example Bind to the `expanded` event by type: jqxSplitter.
    $('#jqxSplitter').on('expanded',
    function (event) {
        var panels = event.args.panels;
        // get first panel.
        var panel1 = panels[0];
        // get second panel.
        var panel2 = panels[1];
        // panel index.
        var index = event.args.index;
    });
Try it: Bind to the expanded event by type: jqxSplitter.
resize | Event |
This event is triggered when the 'resize' operation has ended. #### Code example Bind to the `resize` event by type: jqxSplitter.
    $('#jqxSplitter').on('resize',
    function (event) {
        var panels = event.args.panels;
        // get first panel.
        var panel1 = panels[0];
        // get second panel.
        var panel2 = panels[1];
    });
Try it: Bind to the resize event by type: jqxSplitter.
resizeStart | Event |
This event is triggered when the 'resizeStart' operation has started. #### Code example Bind to the `resizeStart` event by type: jqxSplitter.
    $('#jqxSplitter').on('resizeStart',
    function (event) {
        var panels = event.args.panels;
        // get first panel.
        var panel1 = panels[0];
        // get second panel.
        var panel2 = panels[1];
    });
Try it: Bind to the resizeStart event by type: jqxSplitter.
## Methods
collapse | Method |
Collapse a panel.
Parameter | Type | Description
--- | --- | ---
None |  |
Return Value None #### Code example Invoke the `collapse` method.
     $('#jqxSplitter').jqxSplitter('collapse');
Try it: collapses the jqxSplitter.
destroy | Method |
Destroys the jqxSplitter. This method will remove the jqxSplitter from the DOM and will remove all internal event handlers and styles.
Parameter | Type | Description
--- | --- | ---
None |  |
Return Value None #### Code example Invoke the `destroy` method.
     $('#jqxSplitter').jqxSplitter('destroy');
Try it: destroy the jqxSplitter.
disable | Method |
Disables the jqxSplitter.
Parameter | Type | Description
--- | --- | ---
None |  |
Return Value None #### Code example Invoke the `disable` method.
     $('#jqxSplitter').jqxSplitter('disable');
Try it: disables the jqxSplitter.
enable | Method |
Enables the jqxSplitter.
Parameter | Type | Description
--- | --- | ---
None |  |
Return Value None #### Code example Invoke the `enable` method.
     $('#jqxSplitter').jqxSplitter('enable');
Try it: enables the jqxSplitter.
expand | Method |
Expands a panel.
Parameter | Type | Description
--- | --- | ---
None |  |
Return Value None #### Code example Invoke the `expand` method.
     $('#jqxSplitter').jqxSplitter('expand');
Try it: expands the jqxSplitter.
render | Method |
Renders the jqxSplitter.
Parameter | Type | Description
--- | --- | ---
None |  |
Return Value None #### Code example Invoke the `render` method.
     $('#jqxSplitter').jqxSplitter('render');
Try it: renders the jqxSplitter.
refresh | Method |
Refreshes the jqxSplitter. This method will perform a layout and will arrange the split panels.
Parameter | Type | Description
--- | --- | ---
None |  |
Return Value None #### Code example Invoke the `refresh` method.
     $('#jqxSplitter').jqxSplitter('refresh');
Try it: refresh the jqxSplitter.