ASP .NET Core MVC Documentation

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> }`

ASP .NET Core MVC Documentation

Properties

Events

Code examples

Code examples

Code examples

Code examples

Methods