UI Tabs:Nested list and nested content
I am trying to tab this markup
<div id="test">
<ul>
<li><a href="#intro1">Title1</a>
<ul>
<li><a href="#content1">tab1</a></li>
<li><a href="#content2">tab2</a></li>
</ul>
</li>
<li><a href="#intro2">Title2</a>
<ul>
<li><a href="#content3">tab3</a></li>
<li><a href="#content4">tab4</a></li>
</ul>
</li>
</ul>
<div id="intro1">title1
<div id="content1">content1 here</div>
<div id="content2">content2 here</div>
</div>
<div id="intro2">title2
<div id="content3">content3 here</div>
<div id="content4">content4 here</div>
</div>
</div>
Here's what I need to do. I want, by default, intro1 and content1 to
appear. When I click on tab2, intro1 remains and content2 replaces
content1. Then when I click on title2, everything is replaced by
intro2 and content3.
Using the simplest line of <script type="text/javascript"> $
(function() { $('#test> ul').tabs(); }); </script>, I can only see the
contents of intro1 but not content1 and each tab only displays its
respective content.
Is there anyway to make it display correctly?