Tabbed Sliding Form

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>



<div class="tab-content">
  <div class="tab-pane fade in active" id="home">...1 xoxoxoxoxox</div>
  <div class="tab-pane fade" id="profile">...2 xoxoxoxoxox</div>
  <div class="tab-pane fade" id="messages">...3 xoxoxoxoxox</div>
  <div class="tab-pane fade" id="settings">...4 xoxoxoxoxox</div>
</div>

CSS

/* CSS used here will be applied after bootstrap.css */
.tab-content .tab-pane {    
    position: relative;
}

JavaScript

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