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

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