Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Occurs when mouse cursor hovers over group header in Accordion.

Event Data

eObjectAn event object which contains the group


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

If hoverSelection property value is set to true, whenever mouse cursor hovers over group header, the group can become selected.

Version Information

Supported in: v1.0.


The following example shows how to handle the grouphover event in Accordion widget. Whenever a group header is hovered, the console log will display a message stating over which group the mouse cursor is currently present.

$(document).ready(function() {

// Create an instance of Accordion widget

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


// Create a handler to the grouphover event


"grouphover": function(e){

console.log("grouphover event was fired when header of " + e.object.text + " is hovered");



<!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