Bootstrap 3 Collapse Horizontally

Only Css

by Korah Babu Varghese

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<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">
                          sdcsdcsdc
                        </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"...

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;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(100%) rotate(0deg);
    -webkit-transform-origin: right top;
    -moz-transform: translateX(100%) rotate(0deg);
    -moz-transform-origin: right top;
    -o-transform: translateX(100%) rotate(0deg);
    -o-transform-origin: right top;
    transform: translateX(100%) rotate(0deg);
    transform-origin: right top;
}
.panel-group img {
    -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-group .panel img {
    margin-left:400px;
    margin-top:800px;
    position: absolute;
}