Bootstrap horizontally align nested accordions - html

Question

I am trying to place two nested accordions within the same row so that they appear side-by-side both taking up half the space of the parent accordion.
html:
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
Collapsible Group #1
</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">This is a simple accordion inner content...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
Collapsible Group #2 (With nested accordion inside)
</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<!-- Here we insert another nested accordion -->
<div class="row">
<div class="col-md-3">
<div class="panel-group sub-panel" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
Collapsible Inner Group Item #1
</a></h4>
</div>
<div id="collapseInnerOne" class="panel-collapse collapse in">
<div class="panel-body">Anim pariatur cliche...</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-group" id="accordion3">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion3" href="#collapseInnerTwo">
Collapsible Inner Group Item #2
</a></h4>
</div>
<div id="collapseInnerTwo" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur cliche...</div>
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
</div>
</div>
</div>
</div>
css:
.panel-heading {
background: #00BFFF !important;
text-align: center;
}
#accordion3 {
float: right;
}
.sub-panel {
display: inline;
}
here is a link to a JS fiddle: http://jsfiddle.net/tdcqgo4k/
Ive tried using .row .row-fluid with .span* as well as trying to use col-- classes. please help!

Answer 1

Remove float from your CSS for the third accordian, and change your column definitions to both use col-xs-6 for the column parents of the nested accordians
Demo Fiddle
HTML
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
Collapsible Group #1
</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">This is a simple accordion inner content...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
Collapsible Group #2 (With nested accordion inside)
</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<!-- Here we insert another nested accordion -->
<div class="row">
<div class="col-xs-6">
<div class="panel-group sub-panel" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
Collapsible Inner Group Item #1
</a></h4>
</div>
<div id="collapseInnerOne" class="panel-collapse collapse in">
<div class="panel-body">Anim pariatur cliche...</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel-group" id="accordion3">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion3" href="#collapseInnerTwo">
Collapsible Inner Group Item #2
</a></h4>
</div>
<div id="collapseInnerTwo" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur cliche...</div>
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
</div>
</div>
</div>
</div>
CSS
.panel-heading {
background: #00BFFF !important;
text-align: center;
}