add collapsed class to collapse invoker when it's target is collapsed #3525

2 files changed, 38 insertions, 3 deletions

diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js
index fbc915b9f9..da64a3238a 100644
--- a/js/bootstrap-collapse.js
+++ b/js/bootstrap-collapse.js
@@ -144,12 +144,13 @@
   * ==================== */
 
   $(function () {
-    $('body').on('click.collapse.data-api', '[data-toggle=collapse]', function ( e ) {
+    $('body').on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
       var $this = $(this), href
         , target = $this.attr('data-target')
           || e.preventDefault()
           || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
         , option = $(target).data('collapse') ? 'toggle' : $this.data()
+      $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
       $(target).collapse(option)
     })
   })
diff --git a/js/tests/unit/bootstrap-collapse.js b/js/tests/unit/bootstrap-collapse.js
index fb66135db9..6cc7ac7a44 100644
--- a/js/tests/unit/bootstrap-collapse.js
+++ b/js/tests/unit/bootstrap-collapse.js
@@ -24,7 +24,7 @@ $(function () {
 
       test("should not fire shown when show is prevented", function () {
         $.support.transition = false
-        stop();
+        stop()
         $('<div class="collapse"/>')
           .bind('show', function (e) {
             e.preventDefault();
@@ -39,7 +39,7 @@ $(function () {
 
       test("should reset style to auto after finishing opening collapse", function () {
         $.support.transition = false
-        stop();
+        stop()
         $('<div class="collapse" style="height: 0px"/>')
           .bind('show', function () {
             ok(this.style.height == '0px')
@@ -51,4 +51,38 @@ $(function () {
           .collapse('show')
       })
 
+      test("should add active class to target when collapse shown", function () {
+        $.support.transition = false
+        stop()
+
+        var target = $('<a data-toggle="collapse" href="#test1"></a>')
+          .appendTo($('#qunit-fixture'))
+
+        var collapsible = $('<div id="test1"></div>')
+          .appendTo($('#qunit-fixture'))
+          .on('show', function () {
+            ok(!target.hasClass('collapsed'))
+            start()
+          })
+
+        target.click()
+      })
+
+      test("should remove active class to target when collapse hidden", function () {
+        $.support.transition = false
+        stop()
+
+        var target = $('<a data-toggle="collapse" href="#test1"></a>')
+          .appendTo($('#qunit-fixture'))
+
+        var collapsible = $('<div id="test1" class="in"></div>')
+          .appendTo($('#qunit-fixture'))
+          .on('hide', function () {
+            ok(target.hasClass('collapsed'))
+            start()
+          })
+
+        target.click()
+      })
+
 })
\ No newline at end of file