Advanced User Interface Controls and Components
Determines whether expand box is visible or not.
A Boolean value. The default is true, stating that expand box will become visible in group header.
Supported in: v1.0.
In this example we are presenting how to show/hide the expand box in Accordion. By clicking on 'Show Expand Box' check box, the expand box will be displayed at the far right side of group header. In right-to-left layout, the expand box is shown to the far left side.
var $bar = null;
$(document).ready(function() {
$bar = $('#accordion').accordion({
selectedIndex: 1
});
});
function toggleExpandBox(elem){
$bar.accordion("option", "showExpandBox", elem.checked);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.accordion.css" />
<link rel="stylesheet" href="css/themes/theme-blue.css" />
<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.widget.min.js""></script>
<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.accordion.min.js"></script>
</head>
<body>
<div class="block">
<div id="accordion" class="widget">
<h3><span class="icons empty" data-element="icon"></span><span>Art</span></h3>
<div></div>
<h3><span class="icons health" data-element="icon"></span><span>Health</span></h3>
<div></div>
<h3><span class="icons empty" data-element="icon"></span><span>Literature</span></h3>
<div></div>
<h3><span class="icons science" data-element="icon"></span><span>Science</span></h3>
<div></div>
</div>
<div class="control-panel">
<form name="frm">
<label><input type="checkbox" checked="checked" onclick="toggleExpandBox(this)" /> Show Expand Box</label><br />
</form>
</div>
<div style="clear: both; height: 1px;"></div>
</div>
</body>
</html>
.block
{
position: relative;
margin: 0 auto 0 0;
width: 550px;
}
.control-panel
{
float: right;
font-size: 0.8em;
white-space: nowrap;
width: 100px;
}
.widget
{
float: left;
font-size: 0.75em;
width: 400px;
height: 400px;
}