LIDOR SYSTEMS

Advanced User Interface Controls and Components

Open Direction in Angular Accordion Directive

Created: 09 December 2015

All groups in IntegralUI Accordion directive for AngularJS, by default appear vertically and open their content downwards. There is a built-in option that allows you to change the direction and orientation of accordion groups. You can set accordions to appear horizontally with opening direction of left or right, and vertically with opening direction downwards or upwards.

{{group.body}}


{{group.body}}


Accordion directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

As above demo shows, by choosing an option from buttons below accordion, its orientation will change.

Similar: Accordion Component for Angular 2

Expand Direction

In order to change the orientation of accordion groups, we are using the expandDirection property. The following values are accepted:

  • 'down' - accordion groups are arranged vertically and open downwards
  • 'up' - accordion groups are arranged vertically and open upwards
  • 'right' - accordion groups are arranged horizontally and open on right
  • 'left' - accordion groups are arranged horizontally and open on left

angular

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

.controller("appCtrl", ["$scope", "IntegralUIAccordionService", "$timeout", function($scope, $ctrlService, $timeout){

// A unique identifier for the accordion

$scope.ctrlName = "ctrlSample";

// A property which determines the open direction for the accordion groups

$scope.expandMode = 'right';

 

// An object that holds all accordion groups

$scope.groups = [

{

name: 'group1',

text: 'Books',

body: 'Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor.'

},

{

name: 'group2',

text: 'Music',

body: 'Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat.'

},

{

name: 'group3',

text: 'Favorites',

body: 'Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst.'

}

];

}]);

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

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

<iui-accordion name="{{ctrlName}}" class="directive" groups="groups" expand-direction="{{expandMode}}">

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

<p class="custom-content">{{group.body}}</p>

</iui-accordion-group>

</iui-accordion>

</div>

</body>

</html>

.custom-content

{

margin: 0;

padding: 5px;

}

.iui-accordion-group

{

margin: 1px;

height: 200px;

}

.iui-accordion-group-header

{

height: 20px;

padding: 5px 7px;

}

.iui-accordion-group-content

{

width: 300px;

overflow: auto;

}

Horizontal Accordion that Opens on Left or Right

In horizontal orientation, the opening of accordion groups is either in right or left direction. In this mode, accordion header for all groups is rotated by 90 degrees while their content panel remains the same.

Whenever accordion header is clicked or group is selected from code, it will open on left or right side, depending on whether the expandDirection is set to 'left' or 'right'.

Vertical Accordion that Opens Downwards or Upwards

By default, accordion groups are arranged in vertical layout and they open downwards. If you want accordion to appear vertically but open upwards, you can change this by setting the expandDirection property value to 'up'.

Conclusion

To change the opening direction in Angular Accordion directive is simple. By changing the value of expandDirection property, you can make accordion groups to open either horizontally in left or right direction or open in vertical direction downwards or upwards.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.