fix(accordion): add custom open class support

- Add support for using custom class when accordion is opened

Closes #4198

Author: davious

src/accordion/accordion.js

@@ -79,7 +79,9 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
     link: function(scope, element, attrs, accordionCtrl) {
       accordionCtrl.addGroup(scope);
 
+      scope.openClass = attrs.openClass || 'panel-open';
       scope.$watch('isOpen', function(value) {
+        element.toggleClass(scope.openClass, value);
         if (value) {
           accordionCtrl.closeOthers(scope);
         }

src/accordion/test/accordion.spec.js

@@ -212,7 +212,7 @@ describe('accordion', function() {
         expect(findGroupBody(0).scope().isOpen).toBe(false);
       });
 
-      it('should add "open" when opened', function() {
+      it('should add, by default, "panel-open" when opened', function() {
         var group = groups.eq(0);
         findGroupLink(0).click();
         scope.$digest();
@@ -224,6 +224,34 @@ describe('accordion', function() {
       });
     });
 
+    describe('with open-class attribute', function() {
+      beforeEach(function() {
+        var tpl =
+              '<accordion>' +
+              '<accordion-group heading="title 1" open-class="custom-open-class">Content 1</accordion-group>' +
+              '<accordion-group heading="title 2" open-class="custom-open-class">Content 2</accordion-group>' +
+              '</accordion>';
+        element = angular.element(tpl);
+        $compile(element)(scope);
+        scope.$digest();
+        groups = element.find('.panel');
+      });
+      afterEach(function() {
+        element.remove();
+      });
+
+      it('should add custom-open-class when opened', function() {
+        var group = groups.eq(0);
+        findGroupLink(0).click();
+        scope.$digest();
+        expect(group).toHaveClass('custom-open-class');
+
+        findGroupLink(0).click();
+        scope.$digest();
+        expect(group).not.toHaveClass('custom-open-class');
+      });
+    });
+
     describe('with dynamic panels', function() {
       var model;
       beforeEach(function() {

template/accordion/accordion-group.html

@@ -1,4 +1,4 @@
-<div class="panel panel-default" ng-class="{'panel-open': isOpen}">
+<div class="panel panel-default">
   <div class="panel-heading">
     <h4 class="panel-title">
       <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>