Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Determines whether left-to-right or right-to-left layout is active.

Property Value

A Boolean value. The default is false, stating that groups in Accordion are arranged in left-to-right layout.

Version Information

Supported in: v1.0.


In this example we are showing swap between left-to-right and right-to-left layout in Accordion. By clicking on 'Right to Left' check box, the Accordion will change its layout from ltr to rtl and vice-versa.

var $bar = null;

$(document).ready(function() {

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

rtl: true




function toggleRTL(elem){

$bar.accordion("option", "rtl", elem.checked);


<!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 class="block">

<div id="accordion" class="widget">

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


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


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



<div class="control-panel">

<form name="frm">

<label><input type="checkbox" name="checkRTL" checked="checked" onclick="toggleRTL(this)" /> Right to Left</label><br />



<div style="clear: both; height: 1px;"></div>






position: relative;

margin: 0 auto 0 0;

width: 550px;




float: right;

font-size: 0.8em;

white-space: nowrap;

width: 100px;




float: left;

font-size: 0.75em;

width: 400px;

height: 400px;



See Also