Advanced User Interface Controls and Components
Determines the orientation of content in group header.
A String value. The default is 'horizontal', stating that text or custom content in group header will appear horizontally.
By setting this property value to 'vertical' the text or custom content in group header will appear vertically, rotated by an angle of 90 degress. This value is only accepted when expandDirection property value is set to 'left' or 'right'.
Supported in: v1.0
An example showing vertically oriented text in group header of Accordion widget.
$(document).ready(function() {
// Create an instance of Accordion widget
var $bar = $('#accordion').accordion({
expandDirection: 'right',
headerContentOrientation: 'vertical'
});
});
<!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;
}