I'm trying to add some tabs within an accordion like so:
<div id="accordion">
<h3>Puddy Tat</h3>
<div>CONTENT FOR Puddy Tat</div>
<h3>ThoseCats</h3>
<div id="thoseCats">
<ul>
<li><a href="#0">Rory</a></li>
<li><a href="#1">Gerry</a></li>
<li><a href="#2">Lou</a></li>
<li><a href="#3">Rod</a></li>
</ul>
<div id="0">Content panel linked to Rory tab, shown by defalt</div>
<div id="1">Content panel linked to Gerry tab</div>
<div id="2">Content panel linked to Lou tab</div>
<div id="3">Content panel linked to Rod tab</div>
</div>
<h3>Jackson Browne</h3>
<div>CONTENT FOR Jackson Browne</div>
<h3>Bruce Springsteen</h3>
<div>CONTENT FOR Bruce Springsteen</div>
<h3>Me First and the Gimme Gimmes</h3>
<div>CONTENT FOR Me First and the Gimme Gimmes</div>
<h3>Dwight Yoakam</h3>
<div>CONTENT FOR Dwight Yoakam</div>
</div>
</div>
jQuery:
<script>
$(document).ready(function () {
$("#accordion").accordion({
collapsible: true
});
$("thoseCats").tabs();
});
</script>
...but they are not showing up. I'm using tabs successfully in another website (www.bigsurgarrapata.com). I compared my "head" contents in _SiteLayout.cshtml, and they are exactly the same (as far as css and js used) except for one thing: In my current site (not bigsurgarrapata), I'm using the bootstrap css:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
Just to be sure this wasn't gumming up the works, I commented it out, but still no go - no diff.
Why would the tabs be recalcitrant or coy?
Umm...perhaps this won't solve your problem but you miss the #
hash for the ID selector.
So
$("thoseCats").tabs();
becomes
$("#thoseCats").tabs();
In my jsfiddle it works fine.