<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- begin side tab section --> <div class="container"> <div class="row"> <div class="col-md-12 mb mt"> <div class="nav-tabs-three"> <!-- Design Three Sidebar --> <div class="nav-tabs-three-sidebar"> <ul class="nav"> <li class="active"><a href="#tab1" data-toggle="tab" role="tab" aria-expanded="true"><i class="fa fa-angle-right"></i>Case Summary </a></li> <li class=""><a href="#tab2" data-toggle="tab" role="tab" aria-expanded="false">Initial Feedback</a></li> <li class=""><a href="#tab3" data-toggle="tab" role="tab" aria-expanded="false">Expert Fee's and legal experience</a></li> </ul> </div> <!-- Design Three Content --> <div class="nav-tabs-three-content"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1"> <img src="http://i.imgur.com/shS37ML.jpg" alt="tab1" class="img img-responsive"> </div> <div class="tab-pane fade" id="tab2"> <img src="http://i.imgur.com/blvT4UQ.jpg" alt="tab1" class="img img-responsive"> </div> <div class="tab-pane fade" id="tab3"> <img src="http://i.imgur.com/phcSHZz.jpg" alt="tab1" class="img img-responsive"> </div> </div> </div> </div> </div> </div> </div> <!-- end side tab section -->

/* Nav tabs */ .tab-content { padding-top: 10px; } .tab-content .tab-pane { position: relative; } .active.in { z-index: 0; } /* Nav tabs style 3 */ .nav-tabs-three .nav-tabs-three-sidebar { width:370px; float:left; z-index:22; } .nav-tabs-three .nav-tabs-three-sidebar ul{ padding:0px; margin:0px; } .nav-tabs-three .nav-tabs-three-content{ margin-left:390px; overflow: hidden; } @media (max-width: 990px){ .nav-tabs-three{ max-width:500px; margin:10px auto; } .nav-tabs-three .nav-tabs-three-sidebar{ width:100%; float:none; position:static; text-align: center; } .nav-tabs-three .nav-tabs-three-content{ margin-left:0px !important; margin-top:20px; } } .nav-tabs-three ul.nav li a{ font-size:16px; padding:12px 12px; background:#fff; border: none; border-radius:3px; margin-bottom:5px; color:#555; } .nav-tabs-three ul.nav li:hover a{ color: #666; } .nav-tabs-three ul.nav li.active a{ color: #333; } .nav-tabs-three .tab-content{ padding:10px 15px; border-radius:5px; } .nav-tabs-three .tab-content h4 { font-weight: 600; font-size: 24px; text-align: center; margin-bottom: 12px; padding-bottom: 12px; color: #666; } .nav-tabs-three .tab-content ul { list-style-type: disc; margin-left: 15px; } .nav-tabs-three .tab-content li { margin-bottom: 1em; margin-top: 1em; }

$('*[data-toggle="tab"]').on('shown.bs.tab', function (e) { var target = $(this).attr('href'); $(target).css('left','-'+$(window).width()+'px'); var left = $(target).offset().left; $(target).css({left:left}).animate({"left":"0px"}, 1500); })