jQWidgets Expander Test

by _stephan_

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxnavigationbar.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdockpanel.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxsplitter.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdocking.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxwindow.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxexpander.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.black.css">
<div id="myApp"></div>

CSS

body {
    background-color: #ffe;
}
#myApp {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
}

JavaScript

var expander = $('<div id="myExpander"></div>');
$('#myApp').append(expander);

expander.append('<div id="myHeader">The Header</div>');
expander.append('<div id="myBody"></div>');
expander.find('#myBody').append('<div id="content">The Expander Content</div>');
expander.find('#myBody').append('<div id="myPanel">The panel inside the expander body<br>Some text that will disapear when the panel magically turns white ....</div>');

$('#myPanel').jqxPanel({
    width: '200px',
    height: '100px',
    theme: 'black'
});

$('#myExpander').jqxExpander({
    width: '400px',
    height: '300px',
    toggleMode: 'dblclick',
    theme: 'black'
});


$('#myApp').append('<div>Some Extra Content gggyyy</div>');