22

I would like to know how to use the collapse feature on Bootstrap 3.0 horizontally instead of vertically.

I know this has been asked here already (Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical), but none of the answers works.

Community
  • 1
  • 1
Danilo Faria
  • 233
  • 1
  • 2
  • 4
  • 2
    Post your attempt at using previous answers and tell us what problem do you experience, otherwise this is just a duplicated question. – madth3 Sep 24 '13 at 23:14
  • Well, I do exactly what they say there and it doesn't work. I guess it may be because I'm using the newest version of Bootstrap (3.0) and that question was posted before it was released. – Danilo Faria Sep 25 '13 at 02:11
  • possible duplicate of [Twitter Bootstrap Collapse plugin Direction](http://stackoverflow.com/questions/12498476/twitter-bootstrap-collapse-plugin-direction) – Louis Dec 31 '14 at 18:28

2 Answers2

35

The answer to your question is already given here: https://stackoverflow.com/a/18602739/1596547

The collapse plugin adds a class .collapsing to your element which has a css3 transition. By default the transition changes the height from 0 to (set or auto) so the effect will be vertical. The plugin also sets the height of the element to 0 before the class has been add.

Althought not mentioned in the docs the plugin can do the same for width; set teh width of the element to 0 and add a class. To trigger the plugin to use the width in stead of the height you will have to add an extra class .width:

 <div id="democontent" class="collapse width">

The plugin will check for this class: 

  Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }

Bootstap's CSS doesn't provide a transistion for collapse.width so you have have to add it like:

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

Example, see also: http://bootply.com/85690

<div class="container">
    <div style="height:100px;float:left;background-color:red">
        <button data-toggle="collapse" data-target="#democontent">
            o<br>
            p<br>
            e<br>
            n<br>
        </button>   
    </div>
      <div id="democontent" class="collapse width" style="height:100px;background-color:blue;color:white;">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
</div>
Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • Hello, my friend. Thanks for the answer, but unfortunately that is not what I was referring to. This is the collapse feature I was reffering to: http://getbootstrap.com/javascript/#collapse If you see on this page, it is possible to collapse the items horizontally, but not vertically. That is my question. Thanks a lot anyway. If you happen to know how to solve this problem, I would immensely appreciate to hear it from you. – Danilo Faria Oct 04 '13 at 20:20
  • well i see, i didn't read well. Do you have an example or sketch how this should look? Some examples i know http://bootply.com/73715 (mobile view only,from http://stackoverflow.com/questions/18176776/how-to-make-a-js-horizontal-content-slide-from-px-to-responsive/18177433) http://getbootstrap.com/examples/offcanvas/ and http://stackoverflow.com/questions/18422699/how-to-make-bootstrap-off-canvas-nav-overlap-content-instead-of-move-it/ – Bass Jobsen Oct 04 '13 at 20:40
16

I know this is late, but I just wanna share my solution.

You could play with css. Example I put images with same resolution every collapse body.

html, body {
  background-color:#e9eaed;
}
.content {
  width:960px;
  height:0px;
  margin-right: auto;
  margin-left: auto;
}
.panel-group {
  width:430px;
  z-index: 100;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: right top;
  -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top;
  -o-transform: translateX(-100%) rotate(-90deg);
  -o-transform-origin: right top;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
}
.panel-heading {
  width: 430px;
}
.panel-title {
  height:18px
}
.panel-title a {
  float:right;
  text-decoration:none;
  padding: 10px 430px;
  margin: -10px -430px;
}
.panel-body {
  height:830px;
}
.panel-group img {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateX(0%) rotate(90deg);
  -webkit-transform-origin: left top;
  -moz-transform: translateX(0%) rotate(90deg);
  -moz-transform-origin: left top;
  -o-transform: translateX(0%) rotate(90deg);
  -o-transform-origin: left top;
  transform: translateX(0%) rotate(90deg);
  transform-origin: left top;
}
.panel-group .panel img {
  margin-left:400px;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>



<div class="container">
    <div class="row">
        <div class="content">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                          Suzuki
                        </a>
                      </h4>

                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <img src="http://files.conceptcarz.com/img/Suzuki/suzuki-concept-kizashi-3-2008-01-800.jpg" />
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                  Chevrolet
                </a>
              </h4>

                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            <img src="http://www.wallsave.com/wallpapers/800x400/zl-camaro/65234/zl-camaro-chevrolet-carbon-concept-car-65234.jpg" />
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                  Volvo
                </a>
              </h4>

                    </div>
                    <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">
                            <img src="http://files.conceptcarz.com/img/Volvo/2009_Volvo_S60_Concept-Image-01-800.jpg" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

See demo on jsfiddle

If you want to use write text instead an image, try this jsfiddle.net/fauzi/h7szj1ku/

rails_id
  • 8,120
  • 4
  • 46
  • 84
  • Great Example, But When I Write text content instead image comes in Vertical(bottom to top). how can I make it horizontal left to right? – Ganesh H Oct 28 '14 at 17:38
  • 1
    Changing panel-content width with code jsfiddle.net/fauzi/h7szj1ku/ fixes this issue completely. Thanks! – Ganesh H Oct 29 '14 at 16:12