Having a sidebar with an appended div on load using JQuery. The issue is that the sidebar space remains if the sidebar button is not pressed.
When the sidebar collapses, the div fills in the space like this:
<button class="btn btn-primary fa fa-filter" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Filter
</button>
<div class="innerf-pages section content " >
<div class="fh-container mx-auto">
<div class="row my-lg-5 mb-5" id="my">
<!-- grid left -->
<div class="side-bar col-lg-3 collapse" id="collapseExample">
// Some Divs
</div>
<div class="col-lg-9 mt-lg-0 mt-5 right-product-grid ">
<!-- card group -->
<div class="card-group" id="card-group">
<div class="col-lg-4 col-sm-6 p-0">
<div class="card product-men p-3">
<div class="men-thumb-item">
// some content
</div>
</div>
</div>
</div>
</div>
**//end**
</div>
</div>