MultiSelect Widget + Accordion (w/o function to close on changestart)

Using hover instead of 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 () {
    $("select").multiselect({
        multiple: true,
        header: false,
        height: 'auto',
        selectedText: '# selected'
    });
});

$(function () {
    $("#accordion").accordion({
        event: "click hover",
        autoHeight: false,
        active: 0,
        Height: 20,
    });
});