Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical

Question

Is there a way to collapse the the Bootstrap Collapse plugin from horizontally instead of vertically? Looking at the code this ability doesn\'t seem to be built in, but I\'m

Answer 1

i think translateX(-100%) and translateX(0) might be the way to go rather than animating width as uses hardware acceleration correctly when supported

Answer 2

I figured out how to do this very easily without modifying or adding any javascript.

First you define the following CSS after all Twitter Bootstrap CSS:

.collapse {
  height: auto;
  width: auto;
}

.collapse.height {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  -moz-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

.collapse.width {
  position: relative;
  width: 0;
  overflow: hidden;
  -webkit-transition: width 0.35s ease;
  -moz-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

.collapse.in.width {
  width: auto;
}

.collapse.in.height {
  height: auto;
}

Next, on the target element (where you define the .collapse class) you need to add the class .width or .height depending on what property you want to animate.

Finally, you must wrap the contents of the target element and explicitly define its width if animating the width. This is not required if animating the height.

You can find a working example here -> http://jsfiddle.net/ud3323/ZBAHS/

Answer 3

With bootstrap 3.0.0, you just need to add the width class to the target element and then the following css if you want it to animate.

.collapse.width {
    height: auto;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}

Answer 4

Updated 2019

Bootstrap 4.x

Bootstrap 4 horizontal collapse transtion is basically the same, expected the visible class is now .show instead of .in. It also may help to specify display:block since many elements are now display: flex.

.collapse.show {
  visibility: visible;
}

4.x demo
4.x sidebar demo

Also see:
Bootstrap horizontal menu collapse to sidemenu
Bootstrap - How to slide nav bar from left instead from top

---

Bootstrap 3.3.7 (original answer)

None of the existing answers worked for me. To make the collapse animation horizontal in the latest versions you need to set both transition to width, and also use visibility.

.collapse {
  visibility: hidden;
}
.collapse.in {
  visibility: visible;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

3.x demo

Answer 5

In my version of bootstrap 3 (using LESS), I simply had to include this in my global less file:

.collapsing.width  { 
    width: 0;
    height: auto;
    .transition(width 0.35s ease);
}

The extra class has to be width since the collapse.js looks for this class for the transition. I tried everyone else's suggestions, but they didn't work for me.

Answer 6

Good answers here, but I had to make some modifications for a cleaner, two-way transition:

.collapse.width, .collapsing {
    height: 25px; /* depending on your element height */
    overflow: hidden;
    -webkit-transition: width 0.25s ease;
    -moz-transition: width 0.25s ease;
    -o-transition: width 0.25s ease;
    transition: width 0.25s ease;
}

Setting a fixed height also helped prevent page "jump" as the element collapsed and expanded.