LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


selectedIndex

Gets or sets the currently selected group by using its index.

Property Value

A Number. The default value is -1, stating that there is no group currently selected in Accordion.

Remarks

Whenever a new group is added to the Accordion, automatically becomes selected and expanded. This property value changes depending on the index of selectedGroup in the list of all groups present in the Accordion.

Version Information

Supported in: v1.0.

Example

The following example shows how to select a group from code using the group index. In our example the group at position 2 in the list will become selected. That means the third group, because the list is indexed starting from 0.

$(document).ready(function() {

// Create an instance of Accordion widget

var $bar = $('#accordion').accordion();

 

// Select the third group

$bar.accordion("option", "selectedIndex", 2);

});

<!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 id="accordion" class="widget">

<h3><span>Group 1</span></h3>

<div></div>

<h3><span>Group 2</span></h3>

<div></div>

<h3><span>Group 3</span></h3>

<div></div>

</div>

</body>

</html>

.widget

{

width: 300px;

height: 300px;

}

See Also