jQuery Tabs Problem: All content divs showing at same time
For some reason, when my first div loads, I'm seeing all 3 text show up even though they're in different <div> containers:
<script type="text/javascript">
$(document).ready(function() {
$('#Tabs').tabs({ fx: { opacity: 'toggle'} });
});
</script>
<div id="Tabs">
<ul>
<li id="PTab" runat="server">tab1</li>
<li id="OTab" runat="server">tab2</li>
<li id="RTab" runat="server">tab3</li>
</ul>
<div id="TabsMain">
<div id="PContent">
form
</div>
<div id="OContent">
examples
</div>
<div id="RContent">
test
</div>
</div>
</div>
So when this loads, I see the 2 tabs and then all 3 text shows up below like this:
form
examples
test
Here's a print screen:
http://www.codezest.com/post/tabs.jpg
so you can see that for some reason all of that text is showing up at the same time. Do I need to hide the other divs first? I even tried that with adding $('#Tabs div0').hide(); // Hide all divs but it did not help. I would assume out of the box, it would hide the rest of the divs for me and only show the default first.
