Advanced User Interface Controls and Components
Occurs before group becomes collapsed.
Param | Type | Details |
---|---|---|
e | Object | An event object which contains the collapsing group |
This event can be handled by binding the 'beforecollapse' event to the Accordion widget object.
Supported in: v1.0.
In this example we are showing how to create a handle to the beforecollapse event in Accordion widget.
By handling this event you can prevent group from collapsing depending on some custom conditions. In this example group with text value set to 'Books' cannot collapse.
$(document).ready(function() {
// Create an instance of Accordion widget
var $bar = $('#accordion').accordion();
$bar.on({
"beforecollapse": function(e){
if (e.object.text === 'Books')
return false;
});
});
<!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>Books</span></h3>
<div></div>
<h3><span>Electronics</span></h3>
<div></div>
<h3><span>Music</span></h3>
<div></div>
<h3><span>Science</span></h3>
<div></div>
<h3><span>Sports</span></h3>
<div></div>
</div>
</body>
</html>
.widget
{
width: 300px;
height: 300px;
}
A sample which demonstrates how to handle different events in Accordion widget.