Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Occurs before group becomes selected.

Event Data

eObjectAn event object which contains the group


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

Version Information

Supported in: v1.0.


In this example we are showing how to create a handle to the beforeselect event in Accordion widget.

By handling this event you can prevent group from selection depending on some custom conditions. In this example second group in Accordion widget will never become selected, and because of will never expand.

$(document).ready(function() {

// Create an instance of Accordion widget

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



"beforeselect": function(e){

// Get a list of visible groups present in Accordion widget

var currentList = $bar.accordion('getCurrentList');

// Get the index of the group that is going to become selected

var groupIndex = $.inArray(e.object, currentList);

// If group index equals 1, abort selection

if (groupIndex === 1)

return false;



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














width: 300px;

height: 300px;



See Also