Expand list of list items using angular material

Question

Can anyone give any suggestions on adding the Expand / Collapse view shown here . I would like to use Angular material only with AngularJS and not depend on Bootstrap etc., but I can not find anything suitable in AngularMaterial docs.

thanks

Answer 1

One way is to use 2 consecutive md-list-item .

Here is the HTML code.

  <md-list flex> <md-list-item ng-click="toggle.list1 = !toggle.list1"> <md-icon>explore</md-icon> <span flex>Item List 1</span> <md-icon ng-show="!toggle.list1">expand_more</md-icon> <md-icon ng-show="toggle.list1">expand_less</md-icon> </md-list-item> <md-list-item ng-repeat="item in data" ng-show="toggle.list1"> <span flex-offset="5">{{item}}</span> </md-list-item> <md-list-item ng-click="toggle.list2 = !toggle.list2"> <md-icon>explore</md-icon> <span flex>Item List 2</span> <md-icon ng-show="!toggle.list2">expand_more</md-icon> <md-icon ng-show="toggle.list2">expand_less</md-icon> </md-list-item> <md-list-item ng-repeat="item in data" ng-show="toggle.list2"> <span flex-offset="5">{{item}}</span> </md-list-item> </md-list> 

JS Code:

 angular.module('myApp',['ngMaterial']) .controller('TempController', function($scope){ $scope.data = [ "Item 1", "Item 2", "Item 3", "Item 4"] $scope.toggle = {}; });; 

Here is a working Codepen .

Answer 2

This is not like downloading.

https://github.com/LukaszWatroba/v-accordion

it should be a possible code to make your own accordion with material

http://blog.sodhanalibrary.com/2016/02/accordion-with-angularjs-material-ui.html#.WKxqI1UrJaQ