Properties

animationType string 'slide'

Sets or gets the animationType property.

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander animation-type="fade" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
arrowPosition string 'left'

Sets or gets the arrowPosition property.

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander arrow-position="left" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
collapseAnimationDuration int 400

Sets or gets the collapseAnimationDuration property.

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander collapse-animation-duration="300" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
disabled bool false

Sets or gets the disabled property.

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander disabled="true" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
expanded bool true

Sets or gets the expanded property.

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander expanded="false" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
expandAnimationDuration int 400

Sets or gets the expandAnimationDuration property.

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander expand-animation-duration="300" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
height int 'auto'

Sets or gets the height property.

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander height="100" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
headerPosition string 'top'

Sets or gets the headerPosition property.

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander header-position="bottom" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
initContent string null

Sets or gets the initContent property.

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander init-content="initContent" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
rtl bool false

Sets or gets the rtl property.

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander rtl="true" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
showArrow bool true

Sets or gets the showArrow property.

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander show-arrow="true" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
theme string ''

Sets or gets the theme property.

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander theme="energyblue" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
toggleMode string 'click'

Sets or gets the toggleMode property.

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander toggle-mode="none" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
width int 'auto'

Sets or gets the width property.

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander width="300" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>

Events

collapsing Event

Code examples

Bind to the collapsing event of jqxExpander. 

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander on-collapsing="eventHandler()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}
collapsed Event

Code examples

Bind to the collapsed event of jqxExpander. 

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander on-collapsed="eventHandler()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}
expanding Event

Code examples

Bind to the expanding event of jqxExpander. 

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander on-expanding="eventHandler()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}
expanded Event

Code examples

Bind to the expanded event of jqxExpander. 

<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander on-expanded="eventHandler()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Methods

collapse Method 
<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["collapse"]();									
	}									
</script>									
}
disable Method 
<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["disable"]();									
	}									
</script>									
}
destroy Method 
<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["destroy"]();									
	}									
</script>									
}
enable Method 
<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["enable"]();									
	}									
</script>									
}
expand Method 
<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["expand"]();									
	}									
</script>									
}
focus Method 
<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["focus"]();									
	}									
</script>									
}
getContent Method 
<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		var result = instance["getContent"]();									
	}									
</script>									
}
getHeaderContent Method 
<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		var result = instance["getHeaderContent"]();									
	}									
</script>									
}
invalidate Method 
<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["invalidate"]();									
	}									
</script>									
}
refresh Method 
<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["refresh"]();									
	}									
</script>									
}
render Method 
<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["render"]();									
	}									
</script>									
}
setHeaderContent Method 
<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["setHeaderContent"]('header');									
	}									
</script>									
}
setContent Method 
<script src="~/jqwidgets/jqxexpander.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]'>
    <jqx-expander-header>Header</jqx-expander-header>
    <jqx-expander-body>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 1</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 2</jqx-button>
       <jqx-button style="margin:5px;" theme="@ViewData["Theme"]'>Button 3</jqx-button>
   </jqx-expander-body>
</jqx-expander>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["setContent"]('content');									
	}									
</script>									
}