Advanced User Interface Controls and Components
Determines whether left-to-right or right-to-left layout is active.
A Boolean value. The default is false, stating that groups in Accordion are arranged in left-to-right layout.
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>
<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 class="block">
<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>
<div class="control-panel">
<form name="frm">
<label><input type="checkbox" name="checkRTL" checked="checked" onclick="toggleRTL(this)" /> Right to Left</label><br />
</form>
</div>
<div style="clear: both; height: 1px;"></div>
</div>
</body>
</html>
.block
{
position: relative;
margin: 0 auto 0 0;
width: 550px;
}
.control-panel
{
float: right;
font-size: 0.8em;
white-space: nowrap;
width: 100px;
}
.widget
{
float: left;
font-size: 0.75em;
width: 400px;
height: 400px;
}
A sample which shows how to display Accordion with all groups aligned to the right side.