<div class="container">
  <div class="panel">
  <div class="panel-heading">
    <div>
    <button class="pull-right btn btn-default">Collapse</button>
    </div>
    </div>
    
    <div class="panel-body" style="display:none;">
      <div class="slick-carousel">
  <div class="col-sm-4"> 
              <img src="http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg"  alt="">

  </div>
            <div class="col-sm-4"> 
              <img src="http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg"  alt="">

  </div>
          <div class="col-sm-4"> 
              <img src="http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg"  alt="">

  </div>
          <div class="col-sm-4"> 
              <img src="http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg"  alt="">

  </div>
          <div class="col-sm-4"> 
              <img src="http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg"  alt="">

  </div>
      
       
      </div>
    </div>
  </div>

</div>

/* Customised style */
/* This styles used for only customization of UI */
.container{
  margin-top: 20px;
}
.panel-heading {
  border: 1px solid #eee;
  height: 55px;
}
img {
  width: 100px;
  margin-top: 40px;
}
.slick-prev:before, .slick-next:before{
  color: green !important;
}
// For collapse
  
$( ".btn" ).click(function() {
  $( ".panel-body" ).slideToggle( "slow" );
});

// SLick Slider Code
        $('.slick-carousel').slick({
          slidesToShow: 3,
          slidesToScroll: 2,
          dots: true,
        });

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  2. https://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
  3. https://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js