I'm currently implementing bootstrap's collapsible feature to showcase a list of stores along with expandable details.
However, the issue arises when I expand one of the collapsibles in the left column, causing certain items to shift into the next column. On the other hand, expanding a collapsible in the right column results in a proper sliding animation but introduces additional space in the left column. To witness these two behaviors, please visit the following Plunker link and resize the screen until there are two rows of collapsibles: http://plnkr.co/edit/2SLCQQJetyvM34mrCsHj?p=preview
Below is the code snippet I am using:
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
{{x.name}}
</a>
</h4>
</div>
<div id="{{removeSpaces(x.name, false)}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-sm-12 col-md-6 col-lg-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
My objective is to ensure that when a collapsible is expanded, only its corresponding column slides without affecting neighboring items or shifting onto the next row. Is it feasible to achieve this within Bootstrap's grid system?