Question

I have built this accordion using the jquery ui accordion plugin, I sort of understand how it works but I am stuggling to find the correct way for the accordion to close on mouse out. I would also like for my own arrow icons to swap for a down arrow when an accordion section is open. Here is the fiddle:jquery accordion plugin

Any help appreciated even if it sjust pointing in the right direction. The most important thing is to collapse on mouseout

Answer 1

Here you go: fiddle

$(function() {
    $( "#accordion" ).accordion({
        event: 'click',
        collapsible: true,
        active: false,
        icons: {
            "header": "yourIconClassClosed",
            "headerSelected": "yourIconClassOpen"
        }
    }).on('mouseleave', function() {
        $(this).accordion( "option", "active", false );
    }).children('li').on('mouseenter', function() {
        $(this).find('h3').trigger('click');
    });
});

EDIT: You have to consider my reconstructed HTML:

<div id="helpmenu">
<ul id="accordion">
    <li>
        <h3><a href="#">About us</a></h3>
        <div class="accordhidden">
            <ul>
                <li>List item one</li>
                <li>List item two</li>
                <li>List item three</li>
            </ul>
        </div>
    </li>
   <li>
       <h3><a href="#">Section 1</a></h3>
        <div class="accordhidden">
            <ul>
                <li>List item one</li>
                <li>List item two</li>
                <li>List item three</li>
            </ul>
        </div>
    </li>
    <li>
        <h3><a href="#">Section 2</a></h3>
        <div class="accordhidden">
            <ul>
                <li>List item one</li>
                <li>List item two</li>
                <li>List item three</li>
            </ul>
        </div>
    </li>
    <li>
        <h3><a href="#">Section 3</a></h3>
        <div class="accordhidden">
            <ul>
                <li>List item one</li>
                <li>List item two</li>
                <li>List item three</li>
            </ul>
        </div>
    </li>
    <li>
        <h3><a href="#">Section 4</a></h3>
        <div class="accordhidden">
            <ul>
                <li>List item one</li>
                <li>List item two</li>
                <li>List item three</li>
            </ul>
        </div>
    </li>
</ul>
</div>