Support collapsed attribute to control.

Author: ulion

demos/index.html

@@ -36,7 +36,7 @@ <h1 flex>Angular Material Accordion</h1>
             <md-accordion-group>
               <md-subheader class="md-no-sticky">Caption</md-subheader>
 
-              <md-accordion-content md-icon="home" md-heading="Menu 1" md-arrow="true">
+              <md-accordion-content md-icon="home" md-heading="Menu 1" md-arrow="true" md-accordion-collapsed="false">
                 <md-accordion-button href="#">Submenu 1</md-accordion-button>
                 <md-accordion-button href="#">Submenu 2</md-accordion-button>
                 <md-accordion-button href="#">Submenu 3</md-accordion-button>

dist/angular-material-accordion.css

@@ -1,9 +1,9 @@
 export default function() {
 
-  this.visible = false;
+  this.collapsed = angular.isDefined(this.collapsed) ? this.collapsed : true;
 
   this.changeState = function() {
-    this.visible = !this.visible;
+    this.collapsed = !this.collapsed;
   };
 
 }

dist/angular-material-accordion.js

@@ -9,7 +9,8 @@ let directive = () => {
       heading: '@mdHeading',
       icon: '@?mdIcon',
       svgIcon: '@?mdSvgIcon',
-      arrow: '@?mdArrow'
+      arrow: '@?mdArrow',
+      collapsed: '=?mdAccordionCollapsed'
     },
     replace: true,
     transclude: true,

src/scripts/mdAccordionContent/controller.js

@@ -2,7 +2,7 @@ export default function() {
 
   return `
     <div class="md-accordion-content" layout="column">
-      <md-button class="md-accordion-toggle" ng-if="$mdAccordionContent.heading" ng-click="$mdAccordionContent.changeState();" ng-class="{ 'md-active': $mdAccordionContent.visible }">
+      <md-button class="md-accordion-toggle" ng-if="$mdAccordionContent.heading" ng-click="$mdAccordionContent.changeState();" ng-class="{ 'md-active': !$mdAccordionContent.collapsed }">
         <div layout="row">
           <md-icon ng-if="$mdAccordionContent.svgIcon" md-svg-icon="$mdAccordionContent.svgIcon"></md-icon>
           <md-icon ng-if="$mdAccordionContent.icon">{{ $mdAccordionContent.icon }}</md-icon>
@@ -11,7 +11,7 @@ export default function() {
         </div>
       </md-button>
 
-      <div class="md-accordion-wrapper" md-accordion-disable-animate ng-class="{ 'md-active': $mdAccordionContent.visible, 'md-accordion-wrapper-icons':  $mdAccordionContent.icon }" layout="column" ng-transclude></div>
+      <div class="md-accordion-wrapper" md-accordion-disable-animate ng-class="{ 'md-active': !$mdAccordionContent.collapsed, 'md-accordion-wrapper-icons':  $mdAccordionContent.icon }" layout="column" ng-transclude></div>
     </div>
   `;