Sets or gets the animation type.

Possible Values:

'slide'

'fade'

'none'

Code example

Set the animationType property.

$('#jqxExpander').jqxExpander({animationType: "none" });
                        

Get the animationType property.

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

Sets or gets header's arrow position.

Possible Values:

'left'

'right'

Code example

Set the arrowPosition property.

$('#jqxExpander').jqxExpander({arrowPosition: "right" });
                        

Get the arrowPosition property.

var arrowPosition = $('#jqxExpander').jqxExpander('arrowPosition');

Sets or gets the collapsing animation duration.

Code example

Set the collapseAnimationDuration property.

$('#jqxExpander').jqxExpander({ width: '200px', collapseAnimationDuration:350}); 

Get the collapseAnimationDuration property.

var collapseAnimationDuration = $('#jqxExpander').jqxExpander('collapseAnimationDuration');

Sets or gets whether the expander is disabled.

Code example

Set the disabled property.

$('#jqxExpander').jqxExpander({disabled: true }); 

Get the disabled property.

var disabled = $('#jqxExpander').jqxExpander('disabled');

Sets or gets expander's state (collapsed or expanded).

Code example

Set the expanded property.

$('#jqxExpander').jqxExpander({expanded: true }); 

Get the expanded property.

var expanded = $('#jqxExpander').jqxExpander('expanded');

Sets or gets the expanding animation duration.

Code example

Set the expandAnimationDuration property.

$('#jqxExpander').jqxExpander({expandAnimationDuration:350 });

Get the expandAnimationDuration property.

var expandAnimationDuration = $('#jqxExpander').jqxExpander('expandAnimationDuration');

Sets or gets expander's height. Possible values - 'auto' or string like this 'Npx' where N is any Number or a numeric value in pixels.

Code example

Set the height property.

$('#jqxExpander').jqxExpander({ height: 200 }); 

Get the height property.

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

Sets or gets header's position.

Possible Values:

'top'

'bottom'

Code example

Set the headerPosition property.

$('#jqxExpander').jqxExpander({headerPosition: "bottom"}); 

Get the headerPosition property.

var headerPosition = $('#jqxExpander').jqxExpander('headerPosition');

Callback function called when the item's content needs to be initialized. Useful for initializing other widgets within the content of jqxExpander.

Code example

Set the initContent property.

$("#jqxExpander").jqxExpander({ initContent: function () { $("#jqxButton").jqxButton({width: 100, height: 50 }); } });

Get the initContent property.

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

Determines whether the right-to-left support is enabled.

Code example

Set the rtl property.

$("#jqxExpander").jqxExpander({ rtl: true }); 

Get the rtl property.

var rtl = $('#jqxExpander').jqxExpander('rtl');

Sets or gets whether header's arrow is going to be shown.

Code example

Set the showArrow property.

$('#jqxExpander').jqxExpander({showArrow: false }); 

Get the showArrow property.

var showArrow = $('#jqxExpander').jqxExpander('showArrow');

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 user interaction used for expanding or collapsing the content.

Possible Values:

'click'

'dblclick'

'none'

Code example

Set the toggleMode property.

$('#jqxExpander').jqxExpander({toggleMode: "none" }); 

Get the toggleMode property.

var toggleMode = $('#jqxExpander').jqxExpander('toggleMode');

Sets or gets expander's width.Possible values - 'auto' or string like this 'Npx' where N is any Number or a numeric value in pixels.

Code example

Set the width property.

$('#jqxExpander').jqxExpander({ width: 'auto' }); 

Get the width property.

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

This event is triggered when the jqxExpander is going to be collapsed.

Code example

Bind to the collapsing event by type: jqxExpander.

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

This event is triggered when the jqxExpander is collapsed.

Code example

Bind to the collapsed event by type: jqxExpander.

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

This event is triggered when the jqxExpander is going to be expanded.

Code example

Bind to the expanding expanding event by type: jqxExpander.

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

This event is triggered when the jqxExpander is expanded.

Code example

Bind to the expanded event by type: jqxExpander.

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

Method which is collapsing the expander.

Code example

Invoke the collapse method.

$('#jqxExpander').jqxExpander('collapse'); 

This method is disabling the expander.

Code example

Invoke the disable method.

$('#jqxExpander').jqxExpander('disable'); 

This method destroys the expander.

Code example

Invoke the destroy method.

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

This method is enabling the expander.

Code example

Invoke the enable method.

$('#jqxExpander').jqxExpander('enable'); 

Method used for expanding the expander's content.

Code example

Invoke the expand method.

$('#jqxExpander').jqxExpander('expand'); 

This method focuses on the expander. When the widget is focused, keyboard navigation can be used. Here is a list of the keys, supported by jqxExpander and their function:

• Enter/Spacebar - if the focus is on the header, collapses or expands the widget.
• Tab - focuses on the header or the next element in the DOM.
• Ctrl+Up arrow - if the focus is on the content, focuses on the header.
• Ctrl+Down arrow - if the focus is on the header, focuses on the content.

Code example

Invoke the focus method.

var header = $('#jqxExpander').jqxExpander('focus'); 

Getting expander's content. Returns a string with the content's HTML.

Code example

Invoke the getContent method.

var content = $('#jqxExpander').jqxExpander('getContent'); 

Getting expander's header content. Returns a string with the header's HTML.

Code example

Invoke the getHeaderContent method.

var header = $('#jqxExpander').jqxExpander('getHeaderContent'); 

This method refreshes the expander.

Code example

Invoke the invalidate method.

$('#jqxExpander').jqxExpander('invalidate'); 

This method refreshes the expander.

Code example

Invoke the refresh method.

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

This method renders the expander.

Code example

Invoke the render method.

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

This method is setting specific content to the expander's header.

Code example

Invoke the setHeaderContent method.

$('#jqxExpander').jqxExpander('setHeaderContent', 'Header'); 

This method is setting specific content to the expander.

Code example

Invoke the setContent method.

$('#jqxExpander').jqxExpander('setContent', 'Content');