LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


selectionchanged(e)

Occurs when selected group is changed in Accordion.

Event Data

ParamTypeDetails
eObjectAn event object which contains the newly selected group

Remarks

This event can be handled by binding the 'selectionchanged' event to the Accordion widget object.

Version Information

Supported in: v1.0.

Example

An example showing how to handle selectionchanged event in Accordion widget. Whenever a new group is selected, the console log will display a message stating that new current selection has changed.

$(document).ready(function() {

// Create an instance of Accordion widget

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

 

// Create a handler to the selectionchanged event

$bar.on({

"selectionchanged": function(e){

alert("selectionchanged event was fired when selection changes");

});

});

<!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>Group1</span></h3>

<div></div>

<h3><span>Group2</span></h3>

<div></div>

<h3><span>Group3</span></h3>

<div></div>

</div>

</body>

</html>

.widget

{

width: 300px;

height: 300px;

}

Samples

See Also