horizontal collapse with width class

src/collapse/collapse.js

@@ -4,46 +4,102 @@ angular.module('ui.bootstrap.collapse', [])
 
     return {
       link: function (scope, element, attrs) {
+        var horizontal = element.hasClass('width');
+        var contents;
+
+        if(horizontal){
+          // get all .content children so we can fix their width
+          var children = element.children();
+          for(var i=0; i < children.length; i++){
+            var child = angular.element(children[i]);
+            if(child.hasClass('content')){
+              if(!contents){ contents = []; }
+              contents.push(child);
+            }
+          }
+        }
+        function fixContentWidth(unfix){
+          angular.forEach(contents, function(content){
+            content.css({ width: unfix?'auto':content[0].scrollWidth+'px' });
+          });
+        }
+
         function expand() {
           element.removeClass('collapse')
             .addClass('collapsing')
             .attr('aria-expanded', true)
             .attr('aria-hidden', false);
 
-          $animate.addClass(element, 'in', {
-            to: { height: element[0].scrollHeight + 'px' }
-          }).then(expandDone);
+          var animate = { to: {} };
+          if(horizontal){
+            animate.to.width = element[0].scrollWidth + 'px';
+            fixContentWidth();
+          }
+          else{
+            animate.to.height = element[0].scrollHeight + 'px';
+          }
+
+          $animate.addClass(element, 'in', animate).then(expandDone);
         }
 
         function expandDone() {
+          var css = {};
+          if(horizontal){
+            css.width = 'auto';
+            fixContentWidth(true);
+          }
+          else{
+            css.height = 'auto';
+          }
+
           element.removeClass('collapsing');
-          element.css({height: 'auto'});
+          element.css(css);
         }
 
         function collapse() {
           if(! element.hasClass('collapse') && ! element.hasClass('in')) {
             return collapseDone();
           }
 
+          var css = {};
+          var animate = { to: {} };
+
+          if(horizontal){
+            css.width = element[0].scrollWidth + 'px';
+            animate.to.width = '0';
+            fixContentWidth();
+          }
+          else{
+            css.height = element[0].scrollHeight + 'px';
+            animate.to.height = '0';
+          }
+
           element
             // IMPORTANT: The height must be set before adding "collapsing" class.
             // Otherwise, the browser attempts to animate from height 0 (in
             // collapsing class) to the given height here.
-            .css({height: element[0].scrollHeight + 'px'})
+            .css(css)
             // initially all panel collapse have the collapse class, this removal
             // prevents the animation from jumping to collapsed state
             .removeClass('collapse')
             .addClass('collapsing')
             .attr('aria-expanded', false)
             .attr('aria-hidden', true);
 
-          $animate.removeClass(element, 'in', {
-            to: {height: '0'}
-          }).then(collapseDone);
+          $animate.removeClass(element, 'in', animate).then(collapseDone);
         }
 
         function collapseDone() {
-          element.css({height: '0'}); // Required so that collapse works when animation is disabled
+          var css = {};
+          if(horizontal){
+            css.width = '0';
+            fixContentWidth();
+          }
+          else{
+            css.height = '0';
+          }
+
+          element.css(css); // Required so that collapse works when animation is disabled
           element.removeClass('collapsing');
           element.addClass('collapse');
         }