tabs() is duplicating my container inside the tabbed content?

tabs() is duplicating my container inside the tabbed content?

Hi... this is all a bit complex, but I can't figure out where I've gone wrong.

I'm loading a page of content into a Fancybox - I then call tabs() on the loaded content. This is my JS:

  1. $(document).ready(function(){

        $("a.fancybox").fancybox({
            titleShow        : false,
            onComplete        : function(){
                $('.lightbox_content').tabs({
                    ajaxOptions: {
                        error: function(xhr, status, index, anchor) {
                            $(anchor.hash).html("Couldn't load this tab.");
                        }
                    }
                });
            },
            load: function(event, ui) {
                $('a', ui.panel).click(function() {
                    $(ui.panel).load(this.href);
                    return false;
                });
            }
        });
       
    });






















and this is the HTML that is loaded into the Fancybox:

  1. <div id="favourite_place_container" class="lightbox_content">
        
        <ul>
            <li><a href="/favourite_place" title="My favourite place">My favourite place</a></li>
            <li><a href="/favourite_friends" title="My favourite friends">My favourite friends</a></li>
        </ul>
        
        <div id="favourite_place">
        
            <h2>My favourite place</h2>
        
        </div>

    </div>












Clicking one of the tab links should load the relevant URL into the tab content (the URLs need to be like that, my site is running off Codeigniter)

What happens is that I get tab content divs created, called My_favourite_place and My_favourite_friends. Inside the My_favourite_place one is a duplicate of the favourite_place_container div - including the UL that's just been tabified.

(sorry, that's not very clear - this is the HTML that is generated by tabs() on the code above:

  1. <div class="lightbox_content ui-tabs ui-widget ui-widget-content ui-corner-all" id="favourite_place_container">
       
        <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
            <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a title="My favourite place" href="#My_favourite_place">My favourite place</a></li>
            <li class="ui-state-default ui-corner-top"><a title="My favourite friends" href="#My_favourite_friends">My favourite friends</a></li>
        </ul>
       
    <div id="My_favourite_place" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
       
        <div class="lightbox_content" id="favourite_place_container">
       
            <ul>
                <li><a title="My favourite place" href="/favourite_place">My favourite place</a></li>
                <li><a title="My favourite friends" href="/favourite_friends">My favourite friends</a></li>
            </ul>
           
            <div id="favourite_place">
           
                <h2>My favourite place</h2>
           
            </div>
       
        </div>

    </div>

    <div id="My_favourite_friends" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
       
        <div id="favourite_place">
       
            <h2>My favourite place</h2>
       
        </div>

    </div>



































What am I doing wrong?