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');

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');

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');

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');

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');

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');

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');

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');

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');

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.

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');

Sets the size of toggleButton.

Code examples

Set the toggleButtonSize property.

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

Get the toggleButtonSize property.

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

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');

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. }); 

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. }); 

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. }); 

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. }); 

Closes the responsive panel.

Code examples

Invoke the close method.

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

Destroy the widget.

Code examples

Invoke the destroy method.

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

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

Code examples

Invoke the isCollapsed method.

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

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

Code examples

Invoke the isOpened method.

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

Open the responsive panel.

Code examples

Invoke the open method.

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

Refreshes the widget.

Code examples

Invoke the refresh method.

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

Render the widget.

Code examples

Invoke the render method.

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