Advanced User Interface Controls and Components
Specifies the direction on which groups are expanded.
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.
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>
<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>Group 1</span></h3>
<div></div>
<h3><span>Group 2</span></h3>
<div></div>
<h3><span>Group 3</span></h3>
<div></div>
</div>
</body>
</html>
.widget
{
width: 300px;
height: 300px;
}