{{group.body}}
{{group.body}}
Accordion directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
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}}
As above demo shows, by choosing an option from buttons below accordion, its orientation will change.
Similar: Accordion Component for Angular 2
In order to change the orientation of accordion groups, we are using the expandDirection property. The following values are accepted:
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;
}
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'.
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'.
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.