Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Determines the orientation of content in group header.

Property Value

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'.

Version Information

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>



<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