6

Can anyone give any suggestions for adding an Expand/Collapse view shown here. I'd like to use Angular material with AngularJS only and not be dependant on Bootstrap etc however I can't find anything suitable in the AngularMaterial docs.

Thanks

Community
  • 1
  • 1
Adam
  • 532
  • 3
  • 11
  • 22

2 Answers2

11

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 the working Codepen.

nextt1
  • 3,858
  • 2
  • 18
  • 26
  • 1
    To animate the Expand/Collapse transition, you may consider using [ngAnimate](https://docs.angularjs.org/guide/animations). It's really simple as adding a `section-show-hide` class to the hidden element, and this css code: `.section-show-hide { transition: all linear 0.5s; max-height: 500px; } .section-show-hide.ng-hide { opacity: 0; max-height: 0; }` – Wiil Jan 23 '18 at 02:06
2

This doesn't seem to use bootstrap.

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

this should be possible code to make your own accordion with material

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

Dominik Heim
  • 119
  • 7
  • Do you know if there's and example that uses just AngularMaterial? I'm not able to add extra libraries at this stage. – Adam Feb 21 '17 at 16:13
  • yeah, thats right. its not done with material. Is this one more helpful? http://blog.sodhanalibrary.com/2016/02/accordion-with-angularjs-material-ui.html#.WKxqI1UrJaQ – Dominik Heim Feb 21 '17 at 16:27