Hover in opens accordion, Hover out closes it? How to?

Hover in opens accordion, Hover out closes it? How to?

Hello

Using accordion, I want to open it (only one section) when I hover over the header and close it when I leave the header with my mouse.

Ive been able to get it to work 50% but when I hover my mouse over the header if it is open, it closes. If  it is closed, it opens.

I only want it to open when I hover and automatically close when I stop hovering.

Here is code I have:

  1. <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>jQuery UI Accordion - Open on hoverintent</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
    $( "#accordion" ).accordion({
        collapsible: true,
    event: "click hoverintent"
    });
    });
    /*
    * hoverIntent | Copyright 2011 Brian Cherne
    * http://cherne.net/brian/resources/jquery.hoverIntent.html
    * modified by the jQuery UI team
    */
    $.event.special.hoverintent = {
    setup: function() {
    $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
    },
    teardown: function() {
    $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
    },
    handler: function( event ) {
    var currentX, currentY, timeout,
    args = arguments,
    target = $( event.target ),
    previousX = event.pageX,
    previousY = event.pageY;
    function track( event ) {
    currentX = event.pageX;
    currentY = event.pageY;
    };
    function clear() {
    target
    .unbind( "mousemove", track )
    .unbind( "mouseout", clear );
    clearTimeout( timeout );
    }
    function handler() {
    var prop,
    orig = event;
    if ( ( Math.abs( previousX - currentX ) +
    Math.abs( previousY - currentY ) ) < 7 ) {
    clear();
    event = $.Event( "hoverintent" );
    for ( prop in orig ) {
    if ( !( prop in event ) ) {
    event[ prop ] = orig[ prop ];
    }
    }
    // Prevent accessing the original event since the new event
    // is fired asynchronously and the old event is no longer
    // usable (#6028)
    delete event.originalEvent;
    target.trigger( event );
    } else {
    previousX = currentX;
    previousY = currentY;
    timeout = setTimeout( handler, 100 );
    }
    }
    timeout = setTimeout( handler, 100 );
    target.bind({
    mousemove: track,
    mouseout: clear
    });
    }
    };
    </script>
    </head>
    <body>
    <div id="accordion">
    <h3>Section 1</h3>
    <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
    </div>


    </div>
    </body>
    </html>