change how collapse works - collapse, collapsing, and in

assets/js/application.js

@@ -15,13 +15,11 @@
       offset: navHeight
     })
 
-    // Disable certain links in docs
-    $('.bs-docs-container [href=#]').click(function (e) {
+    $('[href^=#]').click(function (e) {
       e.preventDefault()
     })
 
-    $(document.body).on('click', '[href^=#]', function (e) {
-
+    $(document.body).on('click', '.bs-sidenav [href^=#]', function (e) {
       var $target = $(this.getAttribute('href'))
 
       e.preventDefault() // prevent browser scroll

dist/css/bootstrap.css

@@ -2016,6 +2016,14 @@ input[type="button"].btn-block {
 }
 
 .collapse {
+  display: none;
+}
+
+.collapse.in {
+  display: block;
+}
+
+.collapsing {
   position: relative;
   height: 0;
   overflow: hidden;
@@ -2023,10 +2031,6 @@ input[type="button"].btn-block {
           transition: height 0.35s ease;
 }
 
-.collapse.in {
-  height: auto;
-}
-
 .caret {
   display: inline-block;
   width: 0;

dist/js/bootstrap.js

@@ -53,6 +53,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     $(this).one('webkitTransitionEnd', function () { called = true })
     var callback = function () { if (!called) $($el).trigger('webkitTransitionEnd') }
     setTimeout(callback, duration)
+    return this
   }
 
   $(function () {
@@ -532,8 +533,6 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var dimension = this.dimension()
-    var scroll    = $.camelCase(['scroll', dimension].join('-'))
     var actives   = this.$parent && this.$parent.find('> .accordion-group > .in')
 
     if (actives && actives.length) {
@@ -543,10 +542,32 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
       hasData || actives.data('bs.collapse', null)
     }
 
-    this.$element[dimension](0)
-    this.transition('addClass', 'shown.bs.collapse')
+    var dimension = this.dimension()
 
-    if ($.support.transition) this.$element[dimension](this.$element[0][scroll])
+    this.$element
+      .removeClass('collapse')
+      .addClass('collapsing')
+      [dimension](0)
+
+    this.transitioning = 1
+
+    var complete = function () {
+      this.$element
+        .removeClass('collapsing')
+        .addClass('in')
+        [dimension]('auto')
+      this.transitioning = 0
+      this.$element.trigger('shown.bs.collapse')
+    }
+
+    if (!$.support.transition) return complete.call(this)
+
+    var scrollSize = $.camelCase(['scroll', dimension].join('-'))
+
+    this.$element
+      .one($.support.transition.end, $.proxy(complete, this))
+      .emulateTransitionEnd(350)
+      [dimension](this.$element[0][scrollSize])
   }
 
   Collapse.prototype.hide = function () {
@@ -556,42 +577,33 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var dimension = this.dimension()
-    this.reset(this.$element[dimension]())
-    this.transition('removeClass', 'hidden.bs.collapse')
-    this.$element[dimension](0)
-  }
-
-  Collapse.prototype.reset = function (size) {
     var dimension = this.dimension()
 
     this.$element
+      [dimension](this.$element[dimension]())
+      [0].offsetHeight
+
+    this.$element
+      .addClass('collapsing')
       .removeClass('collapse')
-      [dimension](size || 'auto')
-      [0].offsetWidth
-
-    this.$element[size != null ? 'addClass' : 'removeClass']('collapse')
-
-    return this
-  }
-
-  Collapse.prototype.transition = function (method, completeEvent) {
-    var that     = this
-    var complete = function () {
-      if (completeEvent == 'shown.bs.collapse') that.reset()
-      that.transitioning = 0
-      that.$element.trigger(completeEvent)
-    }
+      .removeClass('in')
 
     this.transitioning = 1
 
-    this.$element[method]('in')
-
-    $.support.transition && this.$element.hasClass('collapse') ?
+    var complete = function () {
+      this.transitioning = 0
       this.$element
-        .one($.support.transition.end, complete)
-        .emulateTransitionEnd(350) :
-      complete()
+        .trigger('hidden.bs.collapse')
+        .removeClass('collapsing')
+        .addClass('collapse')
+    }
+
+    if (!$.support.transition) return complete.call(this)
+
+    this.$element
+      [dimension](0)
+      .one($.support.transition.end, $.proxy(complete, this))
+      .emulateTransitionEnd(350)
   }
 
   Collapse.prototype.toggle = function () {

js/collapse.js

@@ -48,8 +48,6 @@
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var dimension = this.dimension()
-    var scroll    = $.camelCase(['scroll', dimension].join('-'))
     var actives   = this.$parent && this.$parent.find('> .accordion-group > .in')
 
     if (actives && actives.length) {
@@ -59,10 +57,32 @@
       hasData || actives.data('bs.collapse', null)
     }
 
-    this.$element[dimension](0)
-    this.transition('addClass', 'shown.bs.collapse')
+    var dimension = this.dimension()
 
-    if ($.support.transition) this.$element[dimension](this.$element[0][scroll])
+    this.$element
+      .removeClass('collapse')
+      .addClass('collapsing')
+      [dimension](0)
+
+    this.transitioning = 1
+
+    var complete = function () {
+      this.$element
+        .removeClass('collapsing')
+        .addClass('in')
+        [dimension]('auto')
+      this.transitioning = 0
+      this.$element.trigger('shown.bs.collapse')
+    }
+
+    if (!$.support.transition) return complete.call(this)
+
+    var scrollSize = $.camelCase(['scroll', dimension].join('-'))
+
+    this.$element
+      .one($.support.transition.end, $.proxy(complete, this))
+      .emulateTransitionEnd(350)
+      [dimension](this.$element[0][scrollSize])
   }
 
   Collapse.prototype.hide = function () {
@@ -72,42 +92,33 @@
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var dimension = this.dimension()
-    this.reset(this.$element[dimension]())
-    this.transition('removeClass', 'hidden.bs.collapse')
-    this.$element[dimension](0)
-  }
-
-  Collapse.prototype.reset = function (size) {
     var dimension = this.dimension()
 
     this.$element
+      [dimension](this.$element[dimension]())
+      [0].offsetHeight
+
+    this.$element
+      .addClass('collapsing')
       .removeClass('collapse')
-      [dimension](size || 'auto')
-      [0].offsetWidth
-
-    this.$element[size != null ? 'addClass' : 'removeClass']('collapse')
-
-    return this
-  }
-
-  Collapse.prototype.transition = function (method, completeEvent) {
-    var that     = this
-    var complete = function () {
-      if (completeEvent == 'shown.bs.collapse') that.reset()
-      that.transitioning = 0
-      that.$element.trigger(completeEvent)
-    }
+      .removeClass('in')
 
     this.transitioning = 1
 
-    this.$element[method]('in')
-
-    $.support.transition && this.$element.hasClass('collapse') ?
+    var complete = function () {
+      this.transitioning = 0
       this.$element
-        .one($.support.transition.end, complete)
-        .emulateTransitionEnd(350) :
-      complete()
+        .trigger('hidden.bs.collapse')
+        .removeClass('collapsing')
+        .addClass('collapse')
+    }
+
+    if (!$.support.transition) return complete.call(this)
+
+    this.$element
+      [dimension](0)
+      .one($.support.transition.end, $.proxy(complete, this))
+      .emulateTransitionEnd(350)
   }
 
   Collapse.prototype.toggle = function () {

js/transition.js

@@ -46,6 +46,7 @@
     $(this).one('webkitTransitionEnd', function () { called = true })
     var callback = function () { if (!called) $($el).trigger('webkitTransitionEnd') }
     setTimeout(callback, duration)
+    return this
   }
 
   $(function () {

less/component-animations.less

@@ -16,12 +16,14 @@
 }
 
 .collapse {
+  display: none;
+  &.in {
+    display: block;
+  }
+}
+.collapsing {
   position: relative;
   height: 0;
   overflow: hidden;
   .transition(height .35s ease);
-
-  &.in {
-    height: auto;
-  }
 }