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