Bootstrap 3 Collapse (left to right)

Question

http://getbootstrap.com/javascript/#collapse

Is there a way to get this menu sliding from left to right? I've looked around and haven't seen much, but I was wondering if anyone had anymore insight.

Answer 1

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.

Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical