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 id="tabs-1">
        <p>Content for Tab 1<br/></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 id="tabid"></div>

CSS

body {
    background-color: #eef;
}
#tabs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    position:relative;
    overflow:hidden;
}

#tabs-1,
#tabs-2,
#tabs-3 {
    outline: solid 5px red;
    outline-offset: -5px;
}

JavaScript

$("#tabs").tabs({
	hide:{effect:"slide", direction:"right"},
  beforeActivate: function( event, ui ){setTimeout(function(){ui.newPanel.css({'position':'absolute',
  'width':'100%','top':ui.oldPanel.offset().top-11});ui.newPanel.show("slide", { direction: "left" },function(){  ui.newPanel.css({'position':'relative','width':'auto','top':0});
  });},15)}
});