Properties

Name Type Default
animationType String 'slide'

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');
Try it: animationType is set to 'fade'
arrowPosition String 'left'

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');
Try it: arrowPosition is set to 'left'
collapseAnimationDuration Number 400

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');
Try it: collapseAnimationDuration is set to 3000
disabled Boolean false

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');
Try it: disabled is set to true
expanded Boolean true

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');
Try it: expanded is set to false
expandAnimationDuration Number 400

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');
Try it: expandAnimationDuration is set to 3000
height Number/String 'auto'

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');
Try it: height is set to 100
headerPosition String 'top'

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');
Try it: headerPosition is set to 'bottom'
initContent function null

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');
Try it: initContent is set to
rtl Boolean false

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');
Try it: rtl is set to true
showArrow Boolean true

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');
Try it: showArrow 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'
toggleMode String 'click'

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');
Try it: toggleMode is set to 'dblclick'
width Number/String 'auto'

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');
Try it: width is set to 200

Events

collapsing Event

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. }); 
Try it: Bind to the collapsing event by type:jqxExpander
collapsed Event

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. }); 
Try it: Bind to the collapsed event by type:jqxExpander
expanding Event

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. }); 
Try it: Bind to the expanding event by type:jqxExpander
expanded Event

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. }); 
Try it: Bind to the expanded event by type:jqxExpander

Methods

collapse Method

Method which is collapsing the expander.

Parameter Type Description
None
Return Value
None

Code example

Invoke the collapse method.

$('#jqxExpander').jqxExpander('collapse'); 
Try it: collapse the jqxExpander
disable Method

This method is disabling the expander.

Parameter Type Description
None
Return Value
None

Code example

Invoke the disable method.

$('#jqxExpander').jqxExpander('disable'); 
Try it: disables the jqxExpander
destroy Method

This method destroys the expander.

Parameter Type Description
None
Return Value
None

Code example

Invoke the destroy method.

$('#jqxExpander').jqxExpander('destroy'); 
Try it: destroys the jqxExpander
enable Method

This method is enabling the expander.

Parameter Type Description
None
Return Value
None

Code example

Invoke the enable method.

$('#jqxExpander').jqxExpander('enable'); 
Try it: enables the jqxExpander
expand Method

Method used for expanding the expander's content.

Parameter Type Description
None
Return Value
None

Code example

Invoke the expand method.

$('#jqxExpander').jqxExpander('expand'); 
Try it: expands the jqxExpander
focus Method

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.
Parameter Type Description
None
Return Value
None

Code example

Invoke the focus method.

var header = $('#jqxExpander').jqxExpander('focus'); 
Try it: focuses the jqxExpander
getContent Method

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

Parameter Type Description
None
Return Value
String

Code example

Invoke the getContent method.

var content = $('#jqxExpander').jqxExpander('getContent'); 
Try it: gets the content of the jqxExpander
getHeaderContent Method

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

Parameter Type Description
None
Return Value
String

Code example

Invoke the getHeaderContent method.

var header = $('#jqxExpander').jqxExpander('getHeaderContent'); 
Try it: gets the header content of the jqxExpander
invalidate Method

This method refreshes the expander.

Parameter Type Description
None
Return Value
None

Code example

Invoke the invalidate method.

$('#jqxExpander').jqxExpander('invalidate'); 
Try it: invalidates the jqxExpander
refresh Method

This method refreshes the expander.

Parameter Type Description
None
Return Value
None

Code example

Invoke the refresh method.

$('#jqxExpander').jqxExpander('refresh'); 
Try it: refresh the jqxExpander
render Method

This method renders the expander.

Parameter Type Description
None
Return Value
None

Code example

Invoke the render method.

$('#jqxExpander').jqxExpander('render'); 
Try it: renders the jqxExpander
setHeaderContent Method

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

Parameter Type Description
headerContent String
Return Value
None

Code example

Invoke the setHeaderContent method.

$('#jqxExpander').jqxExpander('setHeaderContent', 'Header'); 
Try it: sets the header of the jqxExpander
setContent Method

This method is setting specific content to the expander.

Parameter Type Description
content String
Return Value
None

Code example

Invoke the setContent method.

$('#jqxExpander').jqxExpander('setContent', 'Content'); 
Try it: sets the content of the jqxExpander