Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Determines whether icons are visible or not.

Property Value

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.

Version Information

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>



<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" name="checkIcons" checked="checked" onclick="toggleIcons(this)" /> Show Icons</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;




background-image: url(../resources/icons.png);

background-repeat: no-repeat;

display: inline-block;

overflow: hidden;

padding: 0;

margin: 2px;

width: 16px;

height: 16px;




background-position: 0px 0px;




background-position: -128px -48px;




background-position: 0 -64px;



See Also