"angularjs uib accordion example!"
Bootstrap 3.3.0 Snippet by muhittinbudak

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> </head> <body ng-app="app" class="container"> <div ng-controller="AccordionDemoCtrl"> <uib-accordion close-others="oneAtATime"> <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups" is-open="$first">{{group.content}}</uib-accordion-group> </uib-accordion> </div> </body> </html>
var app = angular.module('app', ['ui.bootstrap']); app.controller('AccordionDemoCtrl', function ($scope) { $scope.oneAtATime = true; $scope.groups = [ { title: 'Dynamic Group Header - 1', content: 'Dynamic Group Body - 1' }, { title: 'Dynamic Group Header - 2', content: 'Dynamic Group Body - 2' } ]; $scope.items = ['Item 1', 'Item 2', 'Item 3']; $scope.addItem = function() { var newItemNo = $scope.items.length + 1; $scope.items.push('Item ' + newItemNo); }; $scope.status = { isFirstOpen: true, isFirstDisabled: false }; $scope.groups = [{ title: "Dynamic Group Header - 1", content: "Dynamic Group Body - 1" }, { title: "Dynamic Group Header - 2", content: "Dynamic Group Body - 2" }, { title: "Dynamic Group Header - 3", content: "Dynamic Group Body - 3" }]; });

Related: See More

BLK• Design System
Tabs and accordion collaboration
Accordion Multi Level List Group Menu
Accordion Menu

Questions / Comments: