Search code examples
jquerypaneljquery-ui-tabs

jQuery UI Tabs conundrum when tab-panel parent element is collapsed

I'm building a panel control that makes use of jQuery UI tabs, and looks like this:

alt text

The tabs are in the header and the tab panels are nested inside the parent element under a single containing (div.form-panel-contents) that I use for expanding/collapsing the panel contents. The problem is when I collapse the containing div via slideUp, somehow Tabs detects that the tab panels container is not visible and applies the CSS class ui-tabs-hide to each of the nested tab panels, which sets all tab panels to display: none.

My question is how can I stop it from applying ui-tabs-hide class when parent div is collapsed?

When I change the state of the containing div I want the state of the tab panels to remain intact, so that the slide up/down looks fluid. I'm also curious how the tool even detects that the parent element was collapsed in the first place.

Code:

if ($.fn.tabs)
    $(".ui-tabs").tabs();

-

<div class="widget ui-tabs form-panel-container">
    <ul class="title_bar">
        <li class="handle"><h5>New Panel Look - Test <span class="asterisk"></span></h5></li>
        <li class="leaf"><a class="leaf_link" href="#tab_name_1">Tab Name 1</a></li>
        <li class="leaf"><a class="leaf_link" href="#tab_name_2">Tab Name 2</a></li>
        <li class="leaf"><a class="leaf_link" href="#tab_name_3">Tab Name 3</a></li>                        
        <li class="handle_buttons"><a href="" class="handle_btn expand"></a><a href="" class="handle_btn question"></a></li>
    </ul>
    <div class="form-panel-contents">
        <div>
            <div id="tab_name_1">
                <div class="text_area">
                    <div class="padder">
                        <p> content content content content content content content content content content content content content content content content content content</p>
                    </div>
                </div>
                <div class="action_bar">
                    <div class="pad">
                        <a href="" class="btn"><label></label>Name of Button</a>
                    </div>
                </div>
            </div><!-- end wrapper div -->
            <div class="text_area" id="tab_name_2">
                <div class="padder">
                    <textarea>content content content content content content content content content content content content</textarea>
                </div>
            </div>
            <div class="text_area" id="tab_name_3">
                <div class="padder">
                    <h5>Input Something<span class="asterisk"></span></h5>
                    <div class="title_container"><input type="text" id="title"></div>
                </div>
            </div>
        </div>
    </div>
</div>
Solution

  • I figured out what the problem was. Apparently I had an extra anchor tag that was being added into the li.handle_button element, this anchor tag was not related to tabs but was for something custom. Just the presence of this tag threw a wrench into the jQuery tabs behavior. I changed this element to a span and now everything works great.