Home » Jquery » jquery – Force content to fit full width before sidebar collapsed Bootstrap 4

jquery – Force content to fit full width before sidebar collapsed Bootstrap 4

Posted by: admin February 22, 2020 Leave a comment

Questions:

View having a sidebar and am appending div on load using Jquery .The problem is the sidebar space remains if the sidebar button is not pressed.’
Before the button pressed

When the sidebar collapsed the div is filled in the space like this
After Button pressed

    <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">

                         //**After button click the following div get appended**

                             <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>
How to&Answer:

You could make it stay opened “:onhover” CSS event. Or you can use Jquery to check the same event is still happening.