Bootstrap 3.0 Collapse Horizontally

Ответ 1

Ответ на ваш вопрос уже приведен здесь: fooobar.com/questions/186991/...

Плагин collapse добавляет класс .collapsing к вашему элементу, который имеет переход css3. По умолчанию переход изменяет высоту от 0 до (установка или авто), чтобы эффект был вертикальным. Плагин также устанавливает высоту элемента в 0 до добавления класса.

Хотя не упоминается в документах, плагин может сделать то же самое для ширины; установите ширину элемента в 0 и добавьте класс. Чтобы заставить плагин использовать ширину вместо высоты, вам нужно добавить дополнительный класс .width:

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

Плагин будет проверять этот класс:

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

Bootstap CSS не обеспечивает транзистор для collapse.width, поэтому вам нужно добавить его как:

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

Пример, см. также: 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>  

Ответ 2

Я знаю, что это поздно, но я просто хочу поделиться своим решением.

Вы можете играть с css. Пример. Я помещаю изображения с одинаковым разрешением в каждое тело развала.

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="#" onclick="location.href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'; return false;" 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>