在元素折叠之前显示滚动

Question

我正在创建一个页面，其中有几个按钮可以水平折叠元素。我使用bootstrap“data-toggle”方法来显示元素。它是一个单页应用程序。所以我只需要水平滚动。 这是我的代码： -

<div class="container-fluid">   
   <div class="row row-horizon" style="overflow-x:scroll;">
       <div class="">
           <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#sidebar">Trendig</button>
           <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#sidebar2">Trendig</button>
       </div>
       <div class="col-sm-6">
           <div class="list-group collapsing"  role="dialog" id="sidebar">
               <a href="#" class="list-group-item active">Trending Coupons</a>    
               <font size=2>
               <a href="#" class="list-group-item">Flat 50 on shoes</a>
               <a href="#" class="list-group-item">Get moto g at Rs 8000 only only at flipkart.com</a>
               <a href="#" class="list-group-item">get something else</a>
               <a href="#" class="list-group-item">free free moto g ke sath moto e free</a>
               <a href="#" class="list-group-item">free</a>
               <a href="#" class="list-group-item">get </a>
               <a href="#" class="list-group-item">some more thing</a>
               <a href="#" class="list-group-item">Link</a>
               <a href="#" class="list-group-item">Link</a>
               </font>
           </div>
       </div>
       <div class="col-sm-6">
           <div class="list-group collapsing"  role="dialog" id="sidebar2">
               <a href="#" class="list-group-item active">Trending Coupons</a>
               <font size=2>
               <a href="#" class="list-group-item">Flat 50 on shoes</a>
               <a href="#" class="list-group-item">Get</a>
               <a href="#" class="list-group-item">get something else</a>
               <a href="#" class="list-group-item">free </a>
               <a href="#" class="list-group-item">free </a>
               <a href="#" class="list-group-item">get</a>
               <a href="#" class="list-group-item">some more thing</a>
               <a href="#" class="list-group-item">Link</a>
               <a href="#" class="list-group-item">Link</a>
               </font>
               </div>
           </div>
       </div>
   </div>
<script src="js/newjs.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>  

.row-horizon {
  overflow-x: scroll ;
  overflow-y: hidden;
  white-space: nowrap;
}
.row-horizon > [class*="col-lg"], .row-horizon > [class*="col-md"], .row-horizon > [class*="col-sm"], .row-horizon > [class*="col-xs"] {
  float: none;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
.row-horizon > .col-xs-12 {
  width: 90%;
}
.row-horizon > .col-xs-11 {
  width: 82.5%;
}
.row-horizon > .col-xs-10 {
  width: 75%;
}
.row-horizon > .col-xs-9 {
  width: 67.5%;
}
.row-horizon > .col-xs-8 {
  width: 60%;
}
.row-horizon > .col-xs-7 {
  width: 52.5%;
}
.row-horizon > .col-xs-6 {
  width: 45%;
}
.row-horizon > .col-xs-5 {
  width: 37.5%;
}
.row-horizon > .col-xs-4 {
  width: 30%;
}
.row-horizon > .col-xs-3 {
  width: 22.5%;
}
.row-horizon > .col-xs-2 {
  width: 15%;
}
.row-horizon > .col-xs-1 {
  width: 7.5%;
}
@media (min-width: 768px) {
  .row-horizon > .col-sm-12 {
    width: 90%;
  }
  .row-horizon > .col-sm-11 {
    width: 82.5%;
  }
  .row-horizon > .col-sm-10 {
    width: 75%;
  }
  .row-horizon > .col-sm-9 {
    width: 67.5%;
  }
  .row-horizon > .col-sm-8 {
    width: 60%;
  }
  .row-horizon > .col-sm-7 {
    width: 52.5%;
  }
  .row-horizon > .col-sm-6 {
    width: 45%;
  }
  .row-horizon > .col-sm-5 {
    width: 37.5%;
  }
  .row-horizon > .col-sm-4 {
    width: 30%;
  }
  .row-horizon > .col-sm-3 {
    width: 22.5%;
  }
  .row-horizon > .col-sm-2 {
    width: 15%;
  }
  .row-horizon > .col-sm-1 {
    width: 7.5%;
  }
}
@media (min-width: 992px) {
  .row-horizon > .col-md-12 {
    width: 90%;
  }
  .row-horizon > .col-md-11 {
    width: 82.5%;
  }
  .row-horizon > .col-md-10 {
    width: 75%;
  }
  .row-horizon > .col-md-9 {
    width: 67.5%;
  }
  .row-horizon > .col-md-8 {
    width: 60%;
  }
  .row-horizon > .col-md-7 {
    width: 52.5%;
  }
  .row-horizon > .col-md-6 {
    width: 45%;
  }
  .row-horizon > .col-md-5 {
    width: 37.5%;
  }
  .row-horizon > .col-md-4 {
    width: 30%;
  }
  .row-horizon > .col-md-3 {
    width: 22.5%;
  }
  .row-horizon > .col-md-2 {
    width: 15%;
  }
  .row-horizon > .col-md-1 {
    width: 7.5%;
  }
}
@media (min-width: 1200px) {
  .row-horizon > .col-lg-12 {
    width: 90%;
  }
  .row-horizon > .col-lg-11 {
    width: 82.5%;
  }
  .row-horizon > .col-lg-10 {
    width: 75%;
  }
  .row-horizon > .col-lg-9 {
    width: 67.5%;
  }
  .row-horizon > .col-lg-8 {
    width: 60%;
  }
  .row-horizon > .col-lg-7 {
    width: 52.5%;
  }
  .row-horizon > .col-lg-6 {
    width: 45%;
  }
  .row-horizon > .col-lg-5 {
    width: 37.5%;
  }
  .row-horizon > .col-lg-4 {
    width: 30%;
  }
  .row-horizon > .col-lg-3 {
    width: 22.5%;
  }
  .row-horizon > .col-lg-2 {
    width: 15%;
  }
  .row-horizon > .col-lg-1 {
    width: 7.5%;
  }
}