Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Specifies the direction on which groups are expanded.

Property Value

A String value. The default is 'down', stating that groups will expand and show their content panel downwards vertically.


During expand/collapse process, the beforeexpand, afterExpand, beforecollapse and aftercollapse events are fired. By handling the beforeexpand and beforcollapse events in your code, you can prevent expanding and collapsing of specified group using your own custom conditions.

Version Information

Supported in: v1.0


In this example the Accordion widget has expandDirection set to 'right', which enables for groups to expand their content horizontally from left to right.

$(document).ready(function() {

// Create an instance of Accordion widget

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

expandDirection: 'right'



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

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


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


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







width: 300px;

height: 300px;


See Also