## Properties

Name | Type | Default
--- | --- | ---
animationDirection | String | 'left'

Sets or gets the direction of the animation. You can use this property when "animationType" is set to 'slide'.

Possible Values:

    'left'

    'right'

    'top'

    'bottom'

#### Code examples

Set the `animationDirection` property.

    $('#jqxResponsivePanel').jqxResponsivePanel({ animationDirection: 'top' });

Get the `animationDirection` property.

    var opacity = $('#jqxResponsivePanel').jqxResponsivePanel('animationDirection');

Try it: animationDirection is set to 'top'

animationHideDelay | Boolean | 'fast'

Sets or gets the speed of the animation when the panel hides. The delay represents the time of starting until the final hiding.

#### Code examples

Set the `animationHideDelay` property.

    $('#jqxResponsivePanel').jqxResponsivePanel({ animationHideDelay: 'slow' });

Get the `animationHideDelay` property.

    var animationHideDelay = $('#jqxResponsivePanel').jqxResponsivePanel('animationHideDelay');

Try it: animationHideDelay is set to 800

animationShowDelay | Number/String | 'fast'

Sets or gets the speed of the animation when the panel shows. The delay represents the time of it's starting until the final positioning.

#### Code examples

Set the `animationShowDelay` property.

    $('#jqxResponsivePanel').jqxResponsivePanel({ animationShowDelay: 'slow' });

Get the `animationShowDelay` property.

    var hoverOpacity = $('#jqxResponsivePanel').jqxResponsivePanel('animationShowDelay');

Try it: animationShowDelay is set to 800

animationType | String | 'fade'

Sets the type of animation using for show/hide the panel.

Possible Values:

    'fade'

    'slide'

    'none'

#### Code examples

Set the `animationType` property.

    $('#jqxResponsivePanel').jqxResponsivePanel({ animationType: 'slide' });

Get the `animationType` property.

    var animationType = $('#jqxResponsivePanel').jqxResponsivePanel('animationType');

Try it: animationType is set to 'slide'

autoClose | Boolean | true

When is set to true, after click outside of the responsive panel it closes.

#### Code examples

Set the `autoClose` property.

    $('#jqxResponsivePanel').jqxResponsivePanel({ autoClose: false });

Get the `autoClose` property.

    var autoClose = $('#jqxResponsivePanel').jqxResponsivePanel('autoClose');

Try it: autoClose is set to false

collapseBreakpoint | Number | 1000

If is set, changes the browser's width, where the panel shows/hides.

#### Code examples

Set the `collapseBreakpoint` property.

    $('#jqxResponsivePanel').jqxResponsivePanel({ collapseBreakpoint: 1000 });

Get the `collapseBreakpoint` property.

    var collapseBreakpoint = $('#jqxResponsivePanel').jqxResponsivePanel('collapseBreakpoint');

Try it: collapseBreakpoint is set to 600

collapseWidth | Number | null

Sets or gets the width of the panel when it is collapsed.

#### Code examples

Set the `collapseWidth` property.

    $('#jqxResponsivePanel').jqxResponsivePanel({ collapseWidth: 1000 });

Get the `collapseWidth` property.

    var collapseWidth = $('#jqxResponsivePanel').jqxResponsivePanel('collapseWidth');

Try it: collapseWidth is set to 600

height | Number/String | null

Sets or gets the responsive panel's height.

#### Code examples

Set the `height` property.

    $("#jqxResponsivePanel").jqxResponsivePanel({ height: 400 });

Get the `height` property.

    var height = $('#jqxResponsivePanel').jqxResponsivePanel('height');

Try it: height is set to 400

initContent | function | null

Initializes the responsive panel content.

#### Code examples

Set the `initContent` property.

    $('#jqxResponsivePanel').jqxResponsivePanel({ initContent: function () {
        $('#jqxButton').jqxButton({ width: 80 });
    }
    });

Get the `initContent` property.

    var initContent = $('#jqxResponsivePanel').jqxResponsivePanel('initContent');

Try it: initContent is set to a custom function

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'

toggleButton | String/Object | null

Sets or gets the element, where toggleButton is rendered.

#### Code examples

Set the `toggleButton` property.

    $('#jqxResponsivePanel').jqxResponsivePanel({ toggleButton: $('#toggleResponsivePanel') });

Get the `toggleButton` property.

    var toggleButton = $('#jqxResponsivePanel').jqxResponsivePanel('toggleButton');

Try it: toggleButton is set to $('#responsivePanelButton')

toggleButtonSize | Number/String | 30

Sets the size of toggleButton.

#### Code examples

Set the `toggleButtonSize` property.

    $('#jqxResponsivePanel').jqxResponsivePanel({ toggleButtonSize: 40 });

Get the `toggleButtonSize` property.

    var toggleButtonSize = $('#jqxResponsivePanel').jqxResponsivePanel('toggleButtonSize');

Try it: toggleButtonSize is set to 40

width | Number/String | null

Sets or gets the responsive panel's width.

#### Code examples

Set the `width` property.

    $("#jqxResponsivePanel").jqxResponsivePanel({ width: 200 });

Get the `width` property.

    var width = $('#jqxResponsivePanel').jqxResponsivePanel('width');

Try it: width is set to 300

## Events

close | Event |

This event is triggered when the responsive panel finishes it's closing.

#### Code examples

Bind to the `close` event by type: jqxResponsivePanel.

    $('#jqxResponsivePanel').on('close', function () { // Some code here. });

Try it: Bind to the close event by type: jqxResponsivePanel.

collapse | Event |

This event is triggered when the the browser's width becomes smaller than the value of collapseBreakpoint.

#### Code examples

Bind to the `collapse` event by type: jqxResponsivePanel.

    $('#jqxResponsivePanel').on('collapse', function () { // Some code here. });

Try it: Bind to the collapse event by type: jqxResponsivePanel.

expand | Event |

This event is triggered when the the browser's width becomes greather than the value of collapseBreakpoint.

#### Code examples

Bind to the `expand` event by type: jqxResponsivePanel.

    $('#jqxResponsivePanel').on('expand', function () { // Some code here. });

Try it: Bind to the expand event by type: jqxResponsivePanel.

open | Event |

This event is triggered when the responsive panel finishes it's opening.

#### Code examples

Bind to the `open` event by type: jqxResponsivePanel.

    $('#jqxResponsivePanel').on('open', function () { // Some code here. });

Try it: Bind to the open event by type: jqxResponsivePanel.

## Methods

close | Method |

Closes the responsive panel.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `close` method.

    $('#jqxResponsivePanel').jqxResponsivePanel('close');

Try it: closes the widget

destroy | Method |

Destroy the widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `destroy` method.

    $('#jqxResponsivePanel').jqxResponsivePanel('destroy');

Try it: destroy the widget

isCollapsed | Method |

Returns true or false when the panel is collapsed or expanded.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
Boolean

#### Code examples

Invoke the `isCollapsed` method.

    $('#jqxResponsivePanel').jqxResponsivePanel('isCollapsed');

Try it: checks if the panel is collapsed

isOpened | Method |

Returns true or false when the panel is opened or closed.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
Boolean

#### Code examples

Invoke the `isOpened` method.

    $('#jqxResponsivePanel').jqxResponsivePanel('isOpened');

Try it: checks if the panel is opened

open | Method |

Open the responsive panel.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `open` method.

    $('#jqxResponsivePanel').jqxResponsivePanel('open');

Try it: opens the widget

refresh | Method |

Refreshes the widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `refresh` method.

    $('#jqxResponsivePanel').jqxResponsivePanel('refresh');

Try it: refresh the widget

render | Method |

Render the widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `render` method.

    $('#jqxResponsivePanel').jqxResponsivePanel('render');

Try it: render the widget