Advanced User Interface Controls and Components
Determines whether icons are visible or not.
A Boolean value. The default is true, stating that icons inside group headers are visible.
Each group can have its own icon. The group object has icon variable which accepts as value a CSS class with settings for a custom image.
Supported in: v1.0.
In this example we are showing how to show/hide icons in Accordion. By clicking on 'Show Icons' check box, icons will be displayed before group text. In right-to-left layout, icons are shown after group text.
var $bar = null;
$(document).ready(function() {
$bar = $('#accordion').accordion({
selectedIndex: 1
});
});
function toggleIcons(elem){
$bar.accordion("option", "showIcons", 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" name="checkIcons" checked="checked" onclick="toggleIcons(this)" /> Show Icons</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;
}
.icons
{
}
.empty
{
}
.health
{
}
.science
{
}
A sample which demonstrates how to apply custom icons to each group in Accordion for jQuery.