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 hoping I'm just missing something...

Any help will be greatly appreciated. Thanks!

score 23 · Accepted Answer · answered Sep 25 '12 at 23:14

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/

See http://stackoverflow.com/questions/19843732/bootstrap-3-0-collapse-horizontally-bounces-in-chrome/26898065 and http://jsfiddle.net/zu5ftdjx/ for a working example — Bass Jobsen, Dec 07 '14 at 10:25
Updated working Bootply for 3.3.7 => https://www.bootply.com/vwS8HxEeVB — Carol Skelly, May 19 '17 at 11:31
This didn't work in the latest 3.x or 4.x -- see my update here: http://stackoverflow.com/a/44070096/171456 — Carol Skelly, May 19 '17 at 12:39

flipside · Answer 2 · 2013-09-04T23:09:56.710

22

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;
}

edited Sep 04 '13 at 23:09

answered Sep 03 '13 at 22:52

flipside

579
6
11

Thanks - I had originally used Roy Daniels's version above and was looking to see if there was a simpler way of doing it in 3.0 now we've upgraded. – Emma Burrows Nov 06 '13 at 14:29
2

This doesn't seem to work for me. I'm using flat-ui on top of bootstrap. – Bhushan Lodha Oct 11 '14 at 03:33
Is there a jsfiddle? – richard Mar 27 '18 at 01:48

Carol Skelly · Answer 3 · 2021-10-27T09:54:36.970

Updated 2019

Bootstrap 4.x

Bootstrap 4 horizontal collapse transition 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 horizontal collapse demo
4.x sidebar demo

Also see:
Bootstrap horizontal menu collapse to sidemenu
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

How to make it horizontal accordion like in vertical and opening one at a time? — Shashank Bhatt, Oct 09 '17 at 12:50
I have something working based on this example, but when the element is collapsing horizontally I'm seeing word wrapping. I don't see anything that prevents it in these examples, what am I missing? — Jeremy, Jul 25 '18 at 22:11
@MikeFlynn the demo links seem to for me but either way the relevant CSS is in the answer — Carol Skelly, Apr 27 '20 at 17:16

score 6 · Answer 4 · answered Mar 18 '14 at 05:11

6

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.

answered Mar 18 '14 at 05:11

J_A_X

12,857
1
25
31

2

This worked for me, but since my less file is not compiled together with bootstrap, I had to define the `.transition` mixin before using it: ``.transition (@transition) { -webkit-transition: @transition; -moz-transition: @transition; -ms-transition: @transition; -o-transition: @transition; }`` – yellowcap Mar 24 '15 at 18:33

khollenbeck · Answer 5 · 2012-09-19T16:46:10.480

It doesn't appear to be an option for that particular plugin. It looks like you may need to modify it or hook into it somehow to get it to work that way...

After looking at the JS file for a bit I noticed a couple things. First thing is that it looks like it might be using bootstrap-transition.js ,which appears to be using CSS3 transitions. So it might be possible to write a new transition. I am not 100% certain if that is how it is working though.

Option One

My suggestion would be to either poke around in the bootstrap-collapse.js plugin file for a while and see if you can figure out how it is working.

In particular I would look at this part... bootstrap-carousel.js

this.$element[dimension](0)
this.transition('addClass', $.Event('show'), 'shown')
$.support.transition && this.$element[dimension](this.$element[0][scroll])

It looks like .transition is a callback from bootstrap-transition.js

Option Two

My second suggestion would be to just write something of your own.

My Answer

And finally my answer is that from looking at the bootstrap documentation it doesn't appear to be an option.

Some additional info:

This website seems to be doing similar stuff with CSS3 transitions. http://ricostacruz.com/jquery.transit/

That's along the lines of what I was thinking too. It'd be nice to leverage what's already in Bootstrap, so I think I'm going to try creating my own transition leveraging bootstrap-transition.js. Thanks for your input. I really appreciate it! — Roy Daniels, Sep 19 '12 at 19:39

score 1 · Answer 6 · answered Apr 16 '14 at 12:19

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

answered Apr 16 '14 at 12:19

Adam Spence

3,040
1
21
17

Ixalmida · Answer 7 · 2016-05-23T16:47:33.750

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.

Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical

7 Answers7

Linked

Related