<section class="container">
  <section class="row">
    <div class="col-sm-12">
      <div class="panel panel-default">
        <div class="panel-heading">Panel heading without title</div>
        <div class="panel-body">
<div role="tabpanel">

  <!-- Nav tabs -->
  <ul id="myTab" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home"><img src="http://dummyimage.com/1280x1024/000/fff&text=Home" class="img-responsive"></div>
    <div role="tabpanel" class="tab-pane" id="profile"><img src="http://dummyimage.com/1280x1024/000/fff&text=Profile" class="img-responsive"></div>
    <div role="tabpanel" class="tab-pane" id="messages"><img src="http://dummyimage.com/1280x1024/000/fff&text=Messages" class="img-responsive"></div>
    <div role="tabpanel" class="tab-pane" id="settings"><img src="http://dummyimage.com/1280x1024/000/fff&text=Settings" class="img-responsive"></div>
  </div>

</div>
        </div>
      </div>      
    </div> 
  </section>
</section>
.container{
  padding: 20px 0;
}
$('#myTab').tabCollapse();

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
  2. https://bootswatch.com/slate/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js
  3. https://rawgit.com/flatlogic/bootstrap-tabcollapse/master/bootstrap-tabcollapse.js