jQuery: JSTree and jQuery UI Tabs: jsTree causes other trees in tabs to be hidden, CSS problem?

Question

I've scoured the 'Net for a solution, but I can't seem to find one. Here is my current implementation:

<div id="NavSlider">
            <div id="NavSliderMenu">
                <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
                <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" >
                        <li class="ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Main Menu</a></li>
                        <li class="ui-corner-top ui-state-default"><a href="#tabs-2">My Menu</a></li>
                        <li class="ui-corner-top ui-state-default"><a href="#tabs-3">Recently Used</a></li>
                    </ul>
                    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" >
                        <div id="jsMasterTree" />
                    </div>
                    <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ">
                        <div id="jsMyTree" />
                    </div>          
                    <div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ">
                        <div id="jsRecentTree" />
                    </div>

                </div>
            </div>
            <a href="#" id="NavSliderA" title="Expand Menu"><span id="NavSliderArrow">
                &nbsp;</span></a>
        </div>

Javascript is:

 $(document).ready(function () {
            $("#jsRecentTree").jstree({
                "json_data": {
                    "ajax": {
                        "url": '<%= ResolveUrl("~/AJAXHandler.aspx?action=Get") %>',
                        "async": true,
                        "cache": true
                    },
                    progressive_render: true
                },
                "plugins": ["themes", "json_data", "cookies", "crrm", "ui"]
            })
            .bind("select_node.jstree", function (NODE, REF_NODE) {
                var nodeToOpen = $.jstree._focused().get_selected();
                if (REF_NODE.rslt.obj[0].className === "jstree-closed") {
                    $.jstree._focused().open_node(nodeToOpen);
                } else if (REF_NODE.rslt.obj[0].className === "jstree-open") {
                    $.jstree._focused().close_node(nodeToOpen);
                } else {
                    window.location = REF_NODE.rslt.obj[0].link.replace("~/", "");
                };
            })

I have two other document.ready calls for the other trees that are identical with the exception that the data is a bit different. For some reason, it seems that the jstree in the first panel devours the CSS for the others. I can't seem to get the others to show up.

Any suggestions?

Answer 1

Instead of inline HTML, I blocked the divs:

<div id="jsMasterTree" ></div>

Worked.