Hide Div Inside of Tabs
HTML
<link rel="stylesheet" href="http://wordpressisacms.com/JAVASCRIPT/FRAMEWORKS/jquery/jquery.ui/themes/base/jquery.ui.tabs.css">
<link rel="stylesheet" href="http://wordpressisacms.com/JAVASCRIPT/FRAMEWORKS/jquery/jquery.ui/themes/base/jquery.ui.all.css">
<div class="main">
<div class="slides">Slides division</div>
<div id="tabs">
<ul>
<li> <a href="#tab-1">tab1</a></li>
<li> <a href="#tab-2">tab2</a></li>
<li> <a href="#tab-3">tab3</a></li>
<li> <a href="#tab-4">tab4</a></li>
</ul>
<div id="tab-1">
<div class="tabContent">
Tab 1 content goes here
</div>
</div>
<div id="tab-2">
<div class="tabContent">
Tab 2 content goes here
</div>
</div>
<div id="tab-3">
<div class="tabContent">
Tab 3 content goes here
</div>
</div>
<div id="tab-4">
<div class="tabContent">
<div id="myTabs">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#mappanel">Map</a></li>
</ul>
<div id="tab1">
Tab 1 Content
</div>
<div id="tab2">
Tab 2 Content
</div>
<div id="mappanel">
<div id="map" style="width:600px; height:300px;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript
$('.tabContent').hide();
$('#tabs').tabs({
selected: -1,
show: function(event, ui) {
var selected = $(this).tabs( "option", "selected" );
$("#tab-"+(selected+1)).children('.tabContent').fadeIn(3500);
}
});
$('#myTabs').tabs({
fx: {
height: 'toggle',
opacity: 'toggle',
duration: 300
}
});