Close all accordion on mouseout event in jquery

Question

How can I close all accordion contents on mouseout event? Here's my Jquery code:

$(function() {

        $( "#accordion" ).accordion({
            header: "h3", 
            active: false, 
            collapsible: true,
            heightStyle: "content" 
        });
  });

Where can i place the onmouseout function to close all my contents?

Answer 1

Try attaching the mouseout function like this:

$( "#accordion" ).accordion({
  header: "h3", 
  active: false, 
  collapsible: true,
  heightStyle: "content" 
}).mouseout(function() {
  $(this).accordion('active', false);
});

The jQuery accordion documention says "Setting active to false will collapse all panels."

Answer 2

To close a complete accordion you have to set the active option to false :

http://api.jqueryui.com/accordion/#option-active

$("#accordion").accordion({ active: false });
// or
$("#accordion").accordion( "option", "active", false);

As you can see in the jsfiddle the following code works as desired:

$("#accordion").accordion({
    header: "h3",
    active: false,
    collapsible: true,
    heightStyle: "content"
}).mouseout(function () {
    $(this).accordion({
        active: false
    });
});