Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components

Accordion / Right To Left

{{}} Content

This sample shows how to set the Accordion in right-to-left layout. All groups, their header and content, are displayed in right-to-left layout. By clicking on the checkbox in control panel on the right, you can switch back to the default left-to-right layout setting.

<!DOCTYPE html>



<link rel="stylesheet" href="css/integralui.accordion.css" />

<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.accordion.min.js"></script>



<div ng-app="appModule" ng-controller="appCtrl">

<iui-accordion name="{{ctrlName}}" class="directive" groups="groups" style="direction:{{groupAlignment}}">

<iui-accordion-group ng-repeat="group in groups" name="{{}}" heading="{{group.text}}">

<div class="group-content">

{{}} Content








.module("appModule", ["integralui"])

.controller("appCtrl", function($scope){

$scope.ctrlName = "ctrlSample";

$scope.groups = [

{ id: 1, name: 'Group1', text: 'Header 1' },

{ id: 2, name: 'Group2', text: 'Header 2' },

{ id: 3, name: 'Group3', text: 'Header 3' }



$scope.groupAlignment = 'rtl';


$scope.toggleRTL = function(){

if ($scope.groupAlignment == 'rtl')

$scope.groupAlignment = 'ltr';


$scope.groupAlignment = 'rtl';





direction: rtl;




padding: 25% 10px;