The accordion component is sourced from the angular-ui-bootstrap library, which includes Bootstrap styling by default.
To achieve the desired layout, utilize the Bootstrap grid system by utilizing the row and col classes.
In this specific example, the use of col-xs-4 ensures the display of all three columns within the fiddle.
<accordion close-others="oneAtATime">
<div class="row">
<div class="col-xs-4">
<accordion-group heading="Static Header">This content is directly in the template.</accordion-group>
<accordion-group heading="Static Header">This content is directly in the template.</accordion-group>
<accordion-group heading="Static Header">This content is directly in the template.</accordion-group>
</div>
<div class="col-xs-4">
<accordion-group heading="Static Header">This content is directly in the template.</accordion-group>
<accordion-group heading="Static Header">This content is directly in the template.</accordion-group>
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</accordion-group>
</div>
<div class="col-xs-4">
<accordion-group heading="Dynamic Body Content">
<p>The body of the accordion group expands to fit the contents</p>
<button class="btn btn-small" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</accordion-group>
<accordion-group heading="Static Header">This content is directly in the template.</accordion-group>
<accordion-group heading="{{group.title}}"ng-repeat="group in groups">{{group.content}}</accordion-group>
</div>
</div>
Here is the link to view the implementation on JSFiddle
It's advised to remove any custom CSS styles as they are unnecessary due to Bootstrap inclusion.
Additionally, refer to the Bootstrap grid documentation for further customization by using classes like col-sm-, col-md-, and col-lg- to adjust layouts for different screen sizes.
UPDATE: Building the Accordion Dynamically
To create an accordion dynamically from an array of data such as [item1, item2, ...], it is recommended to transform this data within the controller by splitting it into smaller arrays:
[[item1,item2,...], [item6,...],[item9, ...]]
Below is a simple function that can help achieve this:
function separateArray(arr, size) {
var newArr = [];
var colsLength = Math.ceil(arr.length/size);
for (var i=0; i<arr.length; i+=colsLength) {
newArr.push(arr.slice(i, i+colsLength));
}
return newArr;
}
Utilize the function as follows:
$scope.transformedGroups = separateArray($scope.groups, 3);
This will divide your data into 3 separate arrays:
[[item1, item2,...], [item6,...], [item9,...]]
You can then easily implement the 3 columns with:
<div class="row">
<accordion close-others="oneAtATime">
<div class="col-xs-4" ng-repeat="rows in transformedGroups">
<accordion-group heading="{{group.title}}" ng-repeat="group in rows">{{group.content}}</accordion-group>
</div>
</accordion>
</div>
View the working example on JSFiddle: here