Bootstrap accordion collapsing horizontally
I based my code in the following questions, but was unable to reach the expected result I wanted in my modified version:
Collapse accordion horizontally on large screens and vertically on small screens
http://jsfiddle.net/kylebellamy/q9GLR/180/
https://stackoverflow.com/a/12592438/3499881
As you will see in my code I want that a panel of the accordion opens/closes horizontally and the other stay always open. I almost got it, but I still have problems with the text of the second (opened) panel: it should use all the rest of the page width, but it doesn't and the text goes beyond the panel area on the bottom.
Do you have any idea what I should do?
Please see my code here:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="panel-content">
<ul>
<li>Link#1</li>
<li>Link#2</li>
<li>Link#3</li>
<li>Link#4</li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div class="panel-content">
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>
</div>
</div>
and here the css:
.panel-group {
width: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: 100%;
}
.panel-body {
height:200px;
}
.panel-group .panel-content {
-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 .panel-content {
margin-left:520px;
position: absolute;
}
Here the same in fiddle: https://jsfiddle.net/dbahiense/p4bkt6ed/
Answer
try with this below code will may help you.
html, body {
background-color:#e9eaed;
}
.content {
width:960px;
height:0px;
margin-right: auto;
margin-left: auto;
}
.panel-group {
width:230px;
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: 230px;
}
.panel-title {
height:18px
}
.panel-title a {
float:right;
text-decoration:none;
padding: 10px 100px;
margin: -10px -100px;
}
.panel-body {
height:430px;
}
.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;
}
.textRotate {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
margin-top: 80px !important;
padding-top: 70px !important;
width: 350px !important;
}
.panel-group .panel img {
margin-left:300px;
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/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">
Accordion 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="textRotate">
<ul>
<li>Link#1</li>
<li>Link#2</li>
<li>Link#3</li>
<li>Link#4</li>
</ul>
</div>
</div>
</div>
<div id="collapseOne" class="panel-collapse active">
<div class="panel-body">
<div class="textRotate">
<h3>Title</h3><br>A paragraph of text about something pertinant to the site which people could read should the feel the need to read about it. They could skip it as well but this keeps the initial view a good deal less text heavy, see?<br>- Some Source</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>