Search code examples
javascriptjquerytwitter-bootstrapaccordion

Prevent page scrolling up on collapsing accordion section. Bootstrap 4


Its a bootstrap 4 accordion the body section is bigger than usual that's why when section collapses content below it scrolls up with it.

I'm using this code to scroll to top of clicked header and cancel the scrolling caused by collapsing of previously opened section.

but it seems to run before that collapsing previous one. I researched on internet and unable to find a solution.

code is little lengthy sharing relevant snippet. Also populating card-body using ajax on clicking header.

                <div id="accordion" class="row"></div>
                <script>
                    success: function(res) {
                        let resultHtml = ``;
                        for (let i = 0; i < res.length; i++) {
                            resultHtml +=
                            `
                            <div class="card col-12 px-0">
                                <div class="card-header" id="heading${i}">
                                  <h5 class="mb-0">
                                    <button class="btn btn-link w-100 text-left btn-expand" data-toggle="collapse" data-target="#collapse${i}" data-place-id="${ res[i].place_id }" aria-expanded="false" aria-controls="collapse${i}"><img class="place-icon" src="${ res[i].icon }">
                                      ${ res[i].name }
                                    <span class="float-right">Rating: ${ getStars(res[i].rating) }</span>
                                    </button>
                                  </h5>
                                </div>
                                <div id="collapse${i}" class="collapse" aria-labelledby="heading${i}" data-parent="#accordion">
                                    <div class="card-body"></div>
                                </div>
                            </div>`;
                     }
                     $("#accordion").html(resultHtml);



                     $('#accordion').on('hide.bs.collapse', function () {
                        $('html, body').animate({
                            scrollTop: $( event.target ).parent().offset().top
                        }, 400);                            
                });

              </script>

shown.bs.collapse and hidden.bs.collapse are not working for me. show.bs.collapse and hidde.bs.collapse are firing but still no working.

Thank You


Solution

  • I modified hidden.bs.collapse and changed it to shown.bs.collapse as well as added the event parameter to your function() immediately following the event

     $('#accordion').on('shown.bs.collapse', function(event) {
    

    seems to have done the trick.

    See working example below:

    <!DOCTYPE html>
    <html lang="">
    
    <head>
      <meta charset="utf-8">
      <title>Business Info</title>
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="description" content="">
      <meta name="author" content="">
    
      <link rel="apple-touch-icon" href="">
      <link rel="shortcut icon" href="" type="image/x-icon">
    
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    
      <!-- Font Awesome -->
    
      <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    
      <style>
        .place-icon {
          height: 42px;
        }
        
        .review_user_pic {
          width: 42px;
          vertical-align: middle;
        }
        
        .accordion-loading {
          max-width: 350px;
        }
        
        .loader-contanier {
          align-items: center;
        }
      </style>
    </head>
    
    <body>
    
      <div class="d-flex">
        <div class="w-75 m-auto">
          <div class="row place-search-form form-group mt-3">
            <input class="col-12 col-md-4 form-control" type="text" name="" id="city" value="" placeholder="City" required>
            <input class="col-12 col-md-4 form-control" type="text" name="" id="keyword" value="" placeholder="Keyword" required>
            <input class="col-12 col-md-4 btn btn-primary" id="btn" type="button" value="search" />
          </div>
          <div class="controlls row mb-2">
            <span class="toggle-reviews btn btn-sm btn-light m-auto col border-right">Show Reviews</span>
            <span class="toggle-news btn btn-sm btn-light m-auto col">Show News</span>
          </div>
          <div id="accordion" class="row">
            <div class="card col-12 px-0">
              <div class="card-header" id="heading0">
                <h5 class="mb-0">
                  <button class="btn btn-link w-100 text-left btn-expand" data-toggle="collapse" data-target="#collapse0" data-place-id="ChIJz8eQTjsFGTkRbTcXvpkUQC0" aria-expanded="true" aria-controls="collapse0"><img class="place-icon" src="https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png">
                                    Hardee's
                                    <span class="float-right">Rating: <i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i>&nbsp;</span>
                                </button>
                </h5>
              </div>
              <div id="collapse0" class="collapse show" aria-labelledby="heading0" data-parent="#accordion" style="">
                <div class="card-body">
                  <h5>Hardee's [Lahore]</h5>
                  <p>Address: MM Alam Rd, Block C 2 Gulberg III, LAHORE PAKISTAN, Lahore, Punjab, Pakistan</p><a href="https://www.hardees.com/">Website: https://www.hardees.com/</a>
                  <p>Alexa Rank: 126275</p>
                  <div class="news my-5">
                    <h5>News</h5>
                    <h6>Hardee's employee robbed while making nightly deposit - The Lebanon Enterprise</h6>
                    <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNG-azwNvbB02Rk6UgV8lNhZHGD4JA&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;ei=PACoW-DTLcX_zAbtxr_QCg&amp;url=https://www.lebanonenterprise.com/content/hardee%25E2%2580%2599s-employee-robbed-while-making-nightly-deposit">The Lebanon Enterprise</a>
                    <br>
                    <hr>
                    
                    <br>
                    <hr>
                    <h6>Carl's Jr., Hardee's add Froot Loops Mini Donuts to menu – and they taste just like the cereal - USA TODAY</h6><img class="news-img" src="//t3.gstatic.com/images?q=tbn:ANd9GcQbfoZmCYgG4eQd4BVfEE6RLnVedEt6KI-ieZhJX1eB8eluTJzaDQVW7ZDxnTGsQBlc5wJd8lCb">
                    <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNFazpe2c-TITQViRcs93OKGo_JpHw&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;cid=52780024485508&amp;ei=PACoW-DTLcX_zAbtxr_QCg&amp;url=https://www.usatoday.com/story/money/food/2018/08/29/hardees-carls-jr-froot-loops-mini-donuts/1131551002/">USA TODAY</a>
                    <br>
                    <hr>
                    <h6>Win a TV! Hardee's Super Fan Contest! - WWBT NBC12 News</h6>
                    <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNFBBsJoQp-AT_Om7OmgD65fztbJCg&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;ei=PACoW-DTLcX_zAbtxr_QCg&amp;url=https://www.nbc12.com/sports/super-fan/">WWBT NBC12 News</a>
                    <br>
                    <hr>
                    <h6>Hardee's hepatitis scare sent 2000 for treatment. Now, customers seek damages. - Charlotte Observer</h6><img class="news-img" src="//t3.gstatic.com/images?q=tbn:ANd9GcTtapRl4pzjE6B5wGywiU4DrNF6cjxRIeXVlYdBbqcneur9rx7ZHqTCLOY8cuUD4-GWeF-qFL4m">
                    <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNEHEOa5PnMAB1ZKNQRtmymLU4mFwg&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;ei=PACoW-DTLcX_zAbtxr_QCg&amp;url=https://www.charlotteobserver.com/news/local/article217792415.html">Charlotte Observer</a>
                    <br>
                    <hr>
                    <h6>Man hospitalized, police investigating after stabbing at downtown Billings Hardee's - Billings Gazette</h6><img class="news-img" src="//t1.gstatic.com/images?q=tbn:ANd9GcTiy_FG-VGEnJE44iK5smUe5eHQOvMOO8fDGV0vqegqlBiXw8_CvVaLnp9huyEwdsoWnJUAIcmj">
                    <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNEyIlPxTEIpO7R9rqX3SCMS5S396A&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;cid=52780025325127&amp;ei=PACoW-DTLcX_zAbtxr_QCg&amp;url=https://billingsgazette.com/news/local/man-hospitalized-police-investigating-after-stabbing-at-downtown-billings-hardee/article_901c7f62-a313-577e-b8fd-05050d92477f.html">Billings Gazette</a>
                    <br>
                    <hr>
                    <h6>Hardees wants class action lawsuit dismissed after hepatitis A outbreak - WSOC Charlotte</h6><img class="news-img" src="//t0.gstatic.com/images?q=tbn:ANd9GcT6nRPPD65nzoSzjfl-hb2fV55dw5uhMxz6Ziis9mEk0TitS_ikf4BpvloDAtRoQKAh4VLDGJ6-">
                    <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNFbkOqbdy3b3jTTqfbnlaUS4VjqZQ&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;ei=PACoW-DTLcX_zAbtxr_QCg&amp;url=https://www.wsoctv.com/news/local/hardees-wants-class-action-lawsuit-dismissed-after-hepatitis-a-outbreak/826949737">WSOC Charlotte</a>
                    <br>
                    <hr>
                    <h6>Carl's Jr., Hardee's add Fruit Loops mini donuts to its menu - ABC Action News</h6><img class="news-img" src="//t3.gstatic.com/images?q=tbn:ANd9GcQrqT9d1CqaNCeBF2km6yJJ729YjrFSGapEpzLwnc6L24XIS8QCItF8QBdIwSC3vYJgoji7n9yi">
                    <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNGB0wE313LrKUl9tIKlYzel2-9Jtw&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;cid=52780026051382&amp;ei=PACoW-DTLcX_zAbtxr_QCg&amp;url=https://www.abcactionnews.com/lifestyle/carl-s-jr-hardee-s-add-fruit-loops-mini-donuts-to-its-menu">ABC Action News</a>
                    <br>
                    <hr>
                    <h6>Hardee's launches new Froot Loops donuts - wtkr.com</h6><img class="news-img" src="//t2.gstatic.com/images?q=tbn:ANd9GcR0aaGT_ChbJdl17xUHff9ZCGIOJoo18VenPxv8uBy25tyKEGeoaw9RxbMY4QyGEvsURxsykJjl">
                    <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNHaVXPnV5OjAfyn8nRc4avb9A9ShQ&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;cid=52780023879969&amp;ei=PACoW-DTLcX_zAbtxr_QCg&amp;url=https://wtkr.com/2018/08/28/hardees-launches-new-froot-loops-donuts/">wtkr.com</a>
                    <br>
                    <hr>
                    <h6>WANTED: Suspect who allegedly robbed Verizon store wearing Hardee's uniform - KMOV.com</h6><img class="news-img" src="//t1.gstatic.com/images?q=tbn:ANd9GcSdpLX4twIv0VQpXhaNoiszqGYZzExA_4KOmVVn-Xhp3cYxboKKY_z4QOoA8FItq-JGGLtp0W2f">
                    <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNEYimeqG2KUffZqcw1e8mdGX5FXig&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;cid=52780048450108&amp;ei=PACoW-DTLcX_zAbtxr_QCg&amp;url=https://www.kmov.com/news/wanted-suspect-who-allegedly-robbed-verizon-store-wearing-hardee-s/article_2276a4d0-bac0-11e8-b0e0-efdd94499d26.html">KMOV.com</a>
                    <br>
                    <hr>
                  </div>
                </div>
              </div>
            </div>
            <div class="card col-12 px-0">
              <div class="card-header" id="heading1">
                <h5 class="mb-0">
                  <button class="btn btn-link w-100 text-left btn-expand collapsed" data-toggle="collapse" data-target="#collapse1" data-place-id="ChIJV_dJILEDGTkRy_qFDSboqXE" aria-expanded="false" aria-controls="collapse1"><img class="place-icon" src="https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png">
                                    Builder's fast food
                                    <span class="float-right">Rating: <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;</span>
                                </button>
                </h5>
              </div>
              <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion" style="">
                <div class="card-body">
                  <h5>Builder's fast food [Lahore]</h5>
                  <p>Address: Hadayatullah Block Hidayatullah Block Mustafa Town, Lahore, Punjab, Pakistan</p>
                  <p>Phone: 0321 4880266</p>
                  <div class="reviews">
                    <h5>Reviews</h5>
                    <h6><img class="review_user_pic" src="https://lh5.googleusercontent.com/-uq1iF8RXHWY/AAAAAAAAAAI/AAAAAAAAABM/8nmKcVJW6NM/s128-c0x00000000-cc-rp-mo/photo.jpg"> Farooq Ahmad</h6>
                    <p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star"
                        aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;</p>
                    <p>Tower Burger is 😍😍😍😍 best and economical. 😍😍😍 taste 10/10</p>
                    <h6><img class="review_user_pic" src="https://lh5.googleusercontent.com/-Wy1XoJ_yLRw/AAAAAAAAAAI/AAAAAAAAARA/A8TB7flwH0g/s128-c0x00000000-cc-rp-mo/photo.jpg"> Danyal Tayyub</h6>
                    <p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star"
                        aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;</p>
                    <p>Best burgers in mustafa town. Anyone here should try the tower burger or the special b.b.q burger. Econimical and tasty.</p>
                    <h6><img class="review_user_pic" src="https://lh3.googleusercontent.com/-oS3hcw6fNO8/AAAAAAAAAAI/AAAAAAAAAAA/AAN31DXJHJ3EpFV0bMGRJ1EPYKNdkhK0aQ/s128-c0x00000000-cc-rp-mo/photo.jpg"> Zahid Butt</h6>
                    <p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star"
                        aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;</p>
                    <p>They got taste</p>
                    <h6><img class="review_user_pic" src="https://lh6.googleusercontent.com/-5aFQHnOjxjU/AAAAAAAAAAI/AAAAAAAAACw/iX4DvHKKSe8/s128-c0x00000000-cc-rp-mo/photo.jpg"> Zain Ul-Abdien</h6>
                    <p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star-o"
                        aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i>&nbsp;</p>
                    <p>Tower burger is a good food item here</p>
                    <h6><img class="review_user_pic" src="https://lh6.googleusercontent.com/-wjn4dOHojb4/AAAAAAAAAAI/AAAAAAAACrQ/_FzUl32-9CQ/s128-c0x00000000-cc-rp-mo-ba2/photo.jpg"> Abdur Rehman</h6>
                    <p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star"
                        aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;</p>
                    <p>They are just like my home kitchen!! Not only me but my parents and friends like their quality of services and awesome food.</p>
                  </div>
                  <div class="news my-5">
                    <h5>News</h5>
                    <h6>Editorial: Elusive affordable housing - Concord Monitor</h6>
                    <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNGD-ymByhPY1_N2hwSTrLRjj_5wAQ&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;ei=VwGoW-DRBOLWzAa46YHwAw&amp;url=https://www.concordmonitor.com/Affordable-housing-20343023">Concord Monitor</a>
                    <br>
                    <hr>
                    <h6>Philippines' Richest 2018: Billionaire Builders Push Ahead With Infrastructure Projects - Forbes</h6><img class="news-img" src="//t2.gstatic.com/images?q=tbn:ANd9GcSHToUtbJIxQJdejqs-zYMplTMD5622lRSUegKgxz5DG2DTo9jfOQSEjFaAKu41aqWjkfizJ7m5">
                    <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNG88AFoV2W1ROsfiPiTaM7jyrgHmw&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;cid=52780033582226&amp;ei=VwGoW-DRBOLWzAa46YHwAw&amp;url=https://www.forbes.com/sites/forbesasia/2018/09/05/philippines-richest-2018-billionaire-builders-push-ahead-with-infrastructure-projects/">Forbes</a>
                    <br>
                    <hr>
                    <h6>Watermark has become full service waterfront builder and permit specialist - The Laconia Daily Sun</h6>
                    <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNGeKO9qStU4sJ1zfj-HTD-LnjXUmw&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;ei=VwGoW-DRBOLWzAa46YHwAw&amp;url=https://www.laconiadailysun.com/news/local/watermark-has-become-full-service-waterfront-builder-and-permit-specialist/article_a5581aa2-a718-11e8-9792-6f0f1030633f.html">The Laconia Daily Sun</a>
                    <br>
                    <hr>
                    <br>
                    <hr>
                    <hr>
                    <h6>House builders sign up to NHS scheme to transform homes into healthier environments - Care Appointments</h6>
                    <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNGE8xW07YXKfLIGwTvDNKpK1r8U9g&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;cid=52780022632690&amp;ei=VwGoW-DRBOLWzAa46YHwAw&amp;url=https://www.careappointments.co.uk/care-news/england/item/44966-house-builders-sign-up-to-nhs-scheme-to-transform-homes-into-healthier-environments">Care Appointments</a>
                    <br>
                    <hr>
                    <h6>Why Tech Fails Can (Sometimes) Be Inconveniently Fun - PYMNTS.com</h6><img class="news-img" src="//t3.gstatic.com/images?q=tbn:ANd9GcR7CpJkSw9PE0-8TZ_2hsAxA2SKm7ISsqeDccUhYXsI1tFrQ4w1h8wLOYBka0SIf9C4X90KBlzJ">
                    <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNEUP4c3BTp_jPvpY--Y6D1Ov1XzMg&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;cid=52780051465673&amp;ei=VwGoW-DRBOLWzAa46YHwAw&amp;url=https://www.pymnts.com/news/merchant-innovation/2018/nest-hello-facial-recognition-tech-failures-secure-door-locks/">PYMNTS.com</a>
                    <br>
                    <hr>
                    <h6>New College Rankings Are Out—Including Some That Are Actually Useful - The Atlantic</h6>
                    <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNEKhwsRM7HEIF-Wo7wqM6Sr6qMDQg&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;ei=VwGoW-DRBOLWzAa46YHwAw&amp;url=https://www.theatlantic.com/notes/2018/09/new-college-rankings-are-outincluding-some-that-are-actually-useful/569809/">The Atlantic</a>
                    <br>
                    <hr>
                    <br>
                    <hr>
                  </div>
                </div>
              </div>
            </div>
    
            <div class="card-header" id="heading4">
              <h5 class="mb-0">
                <button class="btn btn-link w-100 text-left btn-expand collapsed" data-toggle="collapse" data-target="#collapse4" data-place-id="ChIJF-a0kf0PGTkRO1AS0gHk19A" aria-expanded="false" aria-controls="collapse4"><img class="place-icon" src="https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png">
                                    Fresho Fast Food
                                    <span class="float-right">Rating: <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i>&nbsp;</span>
                                </button>
              </h5>
            </div>
            <div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordion" style="">
              <div class="card-body">
                <h5>Fresho Fast Food [Lahore]</h5>
                <p>Address: mail canal bank road qazi chowk lahore، saeed block Jehangir Rd, Fatehgarh, Lahore, Punjab 5400, Pakistan</p>
                <p>Phone: 0315 6678546</p>
                <div class="reviews">
                  <h5>Reviews</h5>
                  <h6><img class="review_user_pic" src="https://lh4.googleusercontent.com/-IgaCGgMId34/AAAAAAAAAAI/AAAAAAAAAAA/AAN31DXi4TyOoucvJQqLyrJPw22Ewdad8g/s128-c0x00000000-cc-rp-mo/photo.jpg"> Huma Usman</h6>
                  <p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star"
                      aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;</p>
                  <p>Yummy food at reasonable price</p>
                  <h6><img class="review_user_pic" src="https://lh5.googleusercontent.com/-8B9TZBtFc1E/AAAAAAAAAAI/AAAAAAAAAAA/AAN31DWNWg5XdduwC2ur6jipXIPWPwae3A/s128-c0x00000000-cc-rp-mo-ba3/photo.jpg"> Ameer Hamza</h6>
                  <p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star"
                      aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i>&nbsp;</p>
                  <p>Normal prices, good taste.</p>
                  <h6><img class="review_user_pic" src="https://lh5.googleusercontent.com/-wmiL4ptMORg/AAAAAAAAAAI/AAAAAAAANaA/Ee5jDtTomEI/s128-c0x00000000-cc-rp-mo-ba2/photo.jpg"> Raja Aurongzeb</h6>
                  <p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star"
                      aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;</p>
                  <p>Good place run by four boys, very hard-working and their quality of products are very good.</p>
                  <h6><img class="review_user_pic" src="https://lh5.googleusercontent.com/-hvZErP8QEpM/AAAAAAAAAAI/AAAAAAAAFJo/Kldqo2_-NSA/s128-c0x00000000-cc-rp-mo-ba3/photo.jpg"> Shabbir Ahmad Nadeem</h6>
                  <p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star"
                      aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;</p>
                  <p>Awesome food. Fresh and delicious fast food within minutes. Good staff.</p>
                  <h6><img class="review_user_pic" src="https://lh6.googleusercontent.com/-g7U0UnzPDV4/AAAAAAAAAAI/AAAAAAAAQQY/kTKNa_tBGiQ/s128-c0x00000000-cc-rp-mo-ba3/photo.jpg"> Usman Azeem 676</h6>
                  <p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star-o"
                      aria-hidden="true" style="color: gold;"></i>&nbsp;<i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i>&nbsp;</p>
                  <p>Tasty fast food but bow there are going dirty</p>
                </div>
                <div class="news my-5">
                  <h5>News</h5>
                  <h6>How to Fold the Perfect Burrito - The Manual</h6><img class="news-img" src="//t3.gstatic.com/images?q=tbn:ANd9GcRiFYGx0TJMe8B-8rVHQ2YBXomUF9N9DF5nywREcASLizsPfLvnMzlHYBwBLtB-_fUXQ2kkYzBq">
                  <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNF5-uHDtvATkuyGu1kikh-IgGBndw&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;ei=VACoW6iZD4qS-waojJ_gBw&amp;url=https://www.themanual.com/food-and-drink/how-to-fold-a-burrito/">The Manual</a>
                  <br>
                  <hr>
                  <h6>How to tell if your eggs are fresh or have expired - Times of India</h6><img class="news-img" src="//t2.gstatic.com/images?q=tbn:ANd9GcRGtLfmw8sszOq6j94gbyhfpCDqWQWMnJ-9_Gj_4PCEwwnO9t-wDXUDyPbn1p3gW8fMFvnKZnqx">
                  <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNG52TVwMMUZdbbV-KSse8okk9Zbkg&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;cid=52779046224155&amp;ei=VACoW6iZD4qS-waojJ_gBw&amp;url=https://timesofindia.indiatimes.com/life-style/health-fitness/diet/How-to-tell-if-your-eggs-are-fresh-or-have-expired/articleshow/50930165.cms">Times of India</a>
                  <br>
                  <hr>
                  <h6>3 Pepper Burrito Co. adds flavor to fast-casual Tex-Mex - The News-Press</h6><img class="news-img" src="//t1.gstatic.com/images?q=tbn:ANd9GcTyaO5yjNQP76ypCKhhG_88cnnalWpekjCoPg8_Fvlu1hpFV3LyvWiprzY3XoAvoYB8RDzM9zXk">
                  <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNFXNFDmFzOU6QbDUid0ah49KtRxkQ&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;ei=VACoW6iZD4qS-waojJ_gBw&amp;url=https://www.news-press.com/story/life/food/2015/01/06/pepper-burrito-co-adds-flavor-fast-casual-tex-mex/21359673/">The News-Press</a>
                  <br>
                  <hr>
                  <h6>The Definitive Best Time To Buy A Christmas Tree - HuffPost</h6><img class="news-img" src="//t3.gstatic.com/images?q=tbn:ANd9GcQy9r5DVRsa9Hehj4yZ_o-Al_25RkbS6qxPFsLxvpvfd8rstUH1QgpX7HAQwN08NfsqCUmwEVbh">
                  <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNGXkXXGl5w9iUL8pQt_pHid7NJcFQ&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;cid=52779665752618&amp;ei=VACoW6iZD4qS-waojJ_gBw&amp;url=https://www.huffingtonpost.com/entry/the-definitive-best-time-to-buy-a-christmas-tree_us_5a01e74de4b085d72ae06d67">HuffPost</a>
                  <br>
                  <hr>
                  <h6>BigBasket Ready To Launch Private Labels To Ramp Up Cosmetics And Meat Business - Inc42 Media</h6><img class="news-img" src="//t2.gstatic.com/images?q=tbn:ANd9GcTGPmGxkmGXWc5xU9Ov7TCPiv0drpP33-HycqadVlVmjMlCT4xN-lnJDMkHDqen6NgRTBO_ZMdb">
                  <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNEay6XVsPh75JRnU_tNEriUEgLpBA&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;cid=52779921127901&amp;ei=VACoW6iZD4qS-waojJ_gBw&amp;url=https://inc42.com/buzz/bigbasket-ready-to-scoop-up-cosmetics-and-meat-business/">Inc42 Media</a>
                  <br>
                  <hr>
                  <h6>Steve Cahalan: Cafe opens in Gays Mills food co-op - La Crosse Tribune</h6><img class="news-img" src="//t3.gstatic.com/images?q=tbn:ANd9GcTQ0bTIcbgg9n3GnzYy5yZnWeHfrtdj8GR8v0UQOrSKBnWi4ApiN_de6IEDtHL4aCkxHVFLfvFM">
                  <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNEReWHTqXzGbU0gDxEvnicWbT7GPQ&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;ei=VACoW6iZD4qS-waojJ_gBw&amp;url=https://lacrossetribune.com/business/steve-cahalan-cafe-opens-in-gays-mills-food-co-op/article_07370afc-9994-52dd-ae60-1266bf64c819.html">La Crosse Tribune</a>
                  <br>
                  <hr>
                
                  <br>
                  <hr>
                  <h6>In 3 years Bigbasket will be among the top 3 players in F&amp;G: CEO - India Retailing</h6><img class="news-img" src="//t0.gstatic.com/images?q=tbn:ANd9GcTwSMFRXmcLSaNeMc_CnWJHv8bUOAsaY_wRENq8QNSeEI5wJMPon5K6dIECZNTNsVkMx1iPYJT9">
                  <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNEYBvXAK4UHHBWwJS7fPSkKqw8BcQ&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;ei=VACoW6iZD4qS-waojJ_gBw&amp;url=https://www.indiaretailing.com/2016/07/14/food/food-grocery/in-3-years-bigbasket-will-be-among-the-top-3-players-in-fg-ceo/">India Retailing</a>
                  <br>
                  <hr>
                  <h6>BigBasket to expand private labels, products in next three months - Livemint</h6><img class="news-img" src="//t0.gstatic.com/images?q=tbn:ANd9GcQFXdV6uB3Yr8eJq-T76qSX170vTISfc1ajsWHYN4J4Cl3s2_1tMaAT8fLseQSMA-R7dECRDZfs">
                  <p></p><a href="http://news.google.com/news/url?sa=t&amp;fd=R&amp;ct2=us&amp;usg=AFQjCNFaAGJ6Z-bg__W4xLxGUNROop2a-w&amp;clid=c3a7d30bb8a4878e06b80cf16b898331&amp;ei=VACoW6iZD4qS-waojJ_gBw&amp;url=https://www.livemint.com/Companies/jv1qjU1oS7b7fZT8Hfe0DM/BigBasket-to-expand-private-labels-products-in-next-three-m.html">Livemint</a>
                  <br>
                  <hr>
               
                  <hr>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
    
    
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    
    
      <script>
        $('#accordion').on('shown.bs.collapse', function(event) {
          $('html, body').animate({
            scrollTop: $(event.target).parent().offset().top
          }, 400);
        });
      </script>
    
    
    </body>
    
    </html>