jQuery UI Tabs Example

A simple example showing how to use jQuery UI's tabs

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a>
        </li>
        <li><a href="#tabs-2">Tab 2</a>
        </li>
        <li><a href="#tabs-3">Tab 3</a>
        </li>
    </ul>
    <div class="container">
    <div id="tabs-1">
        <p>Content for Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Content for Tab 2</p>
    </div>
    <div id="tabs-3">
        <p>Content for Tab 3</p>
    </div>
    </div>
</div>
<div id="tabid"></div>

CSS

* {box-sizing:border-box;}
body {
    background-color: #eef;
}
#tabs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    white-space:nowrap;
    overflow:hidden;
}

#tabs-1,
#tabs-2,
#tabs-3 {
  outline: solid 5px red;
  outline-offset: -5px;
}
#tabs-1,
#tabs-2,
#tabs-3 {
  display:inline-block !important;
  width:100%;  
  position:relative;
  
}
.container {
  
  position:relative;
  left:0;
  transition:left 0.5s linear;
}
.move1 {
  
  left:-101%;
}
.move2 {
  
  left:-202%;
}

JavaScript

$("#tabs").tabs({
	hide:{
  
  },
	show:{
  
  }
});
$('#ui-id-1').click(function() {
    $('.container').removeClass("move1");
    $('.container').removeClass("move2");
});
$('#ui-id-2').click(function() {
    $('.container').addClass("move1");
    $('.container').removeClass("move2");    
});
$('#ui-id-3').click(function() {
    $('.container').addClass("move2");
});