My jQuery collapsible doesn't seem to be heeding the size of the content once expanded. Here's the basic form of the collapsible:
<div class="row collapsibles" data-role="collapsible">
<h1>Supercategory A</h1>
<div class="col-xs-7 txt">A1</div><div class="col-xs-5"><button class="btn">Go</button></div>
<div class="col-xs-7 txt">A2</div><div class="col-xs-5"><button class="btn">Go</button></div>
</div>
You can see the problem in full here: https://jsfiddle.net/pseudobison/xd6oejzz/18/. Notice that after expansion, the rounded corner indicating the bottom of the collapsible is in the wrong place.
I've tried setting the height property and experimenting with the content of the outer div, and I've found I can fudge it by adding some br tags there, but what's the right way to do it?
That's happening cause the content has float: left and its parent doesn't, so it can't understand child's height
https://jsfiddle.net/xd6oejzz/23/
<div class="collapsibles col-sm-12" data-role="collapsible">
<h1>Supercategory A</h1>
<div class="row">
<div class="col-xs-7 txt">A1</div><div class="col-xs-5"><button class="btn">Go</button></div>
<div class="col-xs-7 txt">A2</div><div class="col-xs-5"><button class="btn">Go</button></div>
</div>
</div>