Tabs within tabs not working
I am trying to create a set of tabs that when one is clicked more
content with other tabs with their own content shows inside. However,
what I am getting the those inner tabs showing up below what should be
their parent tabs.
<script type="text/javascript">
$(document).ready(function () {
$("#outer_tabs > ul").tabs();
$("#inner_tabs > ul").tabs();
}
</script>
<div id="outer_tabs" class="flora">
<ul>
<li><a href="#tab_1"><span>One</span></a></li>
<li><a href="#tab_2"><span>Two</span></a></li>
</ul>
<div id="tab_1">something</div>
<div id="tab_2">
<div id="inner_tabs" class="flora">
<ul>
<li><a href="#tab_1"><span>One</span></a></li>
<li><a href="#tab_2"><span>Two</span></a></li>
</ul>
<div id="tab_1">something more</div>
<div id="tab_2">something else</div>
</div>
</div>
</div>
In the example above the inner_tabs are showing up below the
outer_tabs when displayed.