## 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.