MultiSelect Widget + Accordion w/ function to close it when accordion closes

changestart: function(){ api.multiselect("close"); Using "mouseover" instead of "click hoverintent"

by chayacooper

HTML

<link rel="stylesheet" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css">
<link rel="stylesheet" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/assets/style.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/src/jquery.multiselect.js"></script>
<div id="accordion">
    
<h3>Section 1</h3>

    <div>
        <select multiple="multiple" size="5">
            <option value="London">London</option>
            <option value="Leeds">Leeds</option>
            <option value="option3">Manchaster</option>
            <option value="option4">New York</option>
            <option value="option5">Chicago</option>
        </select>
    </div>
    
<h3>Section 2</h3>

    <div>
        <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
            purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
            velit, faucibus interdum tellus libero ac justo.</p>
    </div>
    
<h3>Section 3</h3>

    <div>
        <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
            Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
            ac tellus pellentesque semper.</p>
    </div>
    
<h3>Section 4</h3>

    <div>
        <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et
            malesuada fames ac turpis egestas.</p>
    </div>
</div>

CSS

.ui-multiselect-checkboxes {
    position:relative
    /* fixes bug in IE6/7 */
    ;
    overflow-y:hidden
}

JavaScript

$(function () {
    var api = $("select").multiselect({
        multiple: true,
        header: false,
        height: 'auto',
        selectedText: '# selected'
    });

    $("#accordion").accordion({
        event: "mouseover",
        autoHeight: false,
        changestart: function () {
            api.multiselect("close");
        }
    });
});