jQuery UI Accordion - reactivate default active element on mouseout

Question

I'm using an accordion for navigation and I need each element to become active on mouseover, but on mouseout the initial active element should expand, instead of the last hovered one.

This is what I'm trying:

<div id="accordion">
    <h3 id="item-1">Item 1</h3>
    <div id="item-1-content">Item 1 content</div>
    <h3 id="item-2">Item 2</h3>
    <div id="item-2-content">Item 2 content</div>
    <h3 id="item-3">Item 3</h3>
    <div id="item-3-content">Item 3 content</div>
</div>

And the js:

$("#accordion").accordion({
    event: "mouseover",
    active: "#item-1",
    collapsible: false
}).mouseout(function() {
    $(this).accordion('option', 'active', '#item-1');
});

On page load, #item-1-content is expanded like it should. If I move the mouse over #item-2, #item-2-content expands and #item-1-content shrinks, like they should. When I move the mouse outside of the accordion, #item-1-content should become the expanded element again, but that doesn't happen.

If I omit the "mouseout" callback, the last hovered element remains active. If I leave it this way, "mouseout" is triggered even if you don't actually "leave" the accordion because of event bubbling, leading to strange behaviour.

Should I prevent bubbling from the accordion elements or is there a way to achieve this functionality through a combination of accordion options?

Answer 1

I'm not all that familiar with the accordion stuff because I've only used it a couple of times, but in your mouseout should you not be using #item-1 instead of #selected-menu?