I am currently using

$(document).ready(function()
{
var $tabs = $("#tabs").tabs({
        selected: -1,
        event: 'mouseover',
        collapsible: true
});

I have tried including a  .mouseout(function(){
                //$tabs.tabs('option', 'selected', -1);
                $tabs.tabs('select',-1);
                }); // Used various combos of these

I can see that a mouseout event is fired, when you leave the tab and
move your mouse into the now showing div and another mouseout event is
fired when you leave that div.

What is the correct way to hide that div on mouseout and basically set
the tab group back to nothing selected once your focus is no longer on
that tab group?

I found some posts from February 08 and September 08 but none of those
solutions worked.

I was thinking that I could bind something to the "wrapper" but not
sure how or if that would even be the correct way.

<div class="wrapper">

<div id="tabs">
        <ul>
                <li><a href="#tabs-1">Filter 1</a></li>
                <li><a href="#tabs-2">Filter 2</a></li>
                <li><a href="#tabs-3">Filter 3</a></li>
        </ul>
        <div id="tabs-1">html</div>
        <div id="tabs-2">html</div>
        <div id="tabs-3">html</div>
</div>
</div>

Reply via email to