Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Determines whether expand box is visible or not.

Property Value

A Boolean value. The default is true, stating that expand box will become visible in group header.

Version Information

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>



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



<div class="block">

<div id="accordion" class="widget">

<h3><span class="icons empty" data-element="icon"></span><span>Art</span></h3>


<h3><span class="icons health" data-element="icon"></span><span>Health</span></h3>


<h3><span class="icons empty" data-element="icon"></span><span>Literature</span></h3>


<h3><span class="icons science" data-element="icon"></span><span>Science</span></h3>



<div class="control-panel">

<form name="frm">

<label><input type="checkbox" checked="checked" onclick="toggleExpandBox(this)" /> Show Expand Box</label><br />



<div style="clear: both; height: 1px;"></div>






position: relative;

margin: 0 auto 0 0;

width: 550px;




float: right;

font-size: 0.8em;

white-space: nowrap;

width: 100px;




float: left;

font-size: 0.75em;

width: 400px;

height: 400px;


See Also