JQuery UI Nested Tabs

Question

All,

I am using JQuery UI Nested tabs. Consider the structure like this: There are 2 Main tabs: Animals, Birds. Under Animals, there are two tabs "Cats", "Dogs". Both the tabs "Cats" and "Dogs" should be loaded via AJAX when clicked.. So, the code for them is something like this:

<div id="fragment-1">
    <ul>
       <li><a href="/public/catstab"><span>Cats</span></a></li>
       <li><a href="/public/dogstab"><span>Dogs</span></a></li>
    </ul>  
</div>

<script type="text/javascript">
$(document).ready(function()
{
    $("#tabs-loading-message").show();
    $('#fragment-1').tabs({cache:false, spinner:''});
});
</script>

When I switch tabs to "Dogs", I noticed that the HTML that was generated for "Cats" tab still exists on the page (in a hidden state, but still accessible) and Vice Versa. So if both tabs have common elements, that would be a problem.. How can I fix it such that there is only one empty Div and it gets loaded and repainted with whatever tab is currently loaded or switched?