MultiSelect Widget - Click Function

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=Styles1>Styles1 Text
    <br/>
    <br/>
</div>
<div id=Styles2>Styles2 Text
    <br/>
    <br/>
</div>
<select name="Item" id="Item" multiple="multiple" style="width:12em">
    <option value="Dresses">Dresses</option>
    <option value="bar">bar</option>
    <option value="baz">baz</option>
</select>
<div class="accordion" style="margin-top:20px">
     <h3 id="Section1"><a href="#">Section 1</a></h3>

    <div>Content Section 1</div>
     <h3 id="Section2"><a href="#">Section 2</a></h3>

    <div>Content Section 2</div>
     <h3 id="Section3"><a href="#">Section 3</a></h3>

    <div>Content Section 3</div>
</div>

JavaScript

// These 2 issues aren't working properly 
// 1) Doesn't hide '#Styles1' when value 'Dresses' is unselected 
// 2) Requires using '(ui.value)' instead of '[name=Item]' 

$(function () {
    $("#Styles1, #Styles2").hide();
    $("#Section1, #Section2, #Section3").hide();
    $(".accordion").accordion("option", "active", false);

    $("[name=Item]").multiselect({
        click: function (event, ui) {
            $("#Styles1, #Styles2").hide();
            $("#Section1, #Section2, #Section3").hide();
            $(".accordion").accordion("option", "active", false);
            if ((ui.value) === "Dresses") {
                $("#Styles1").show();
                $("#Section1, #Section2").show();
                $(".accordion").accordion("option", "active", 0);
                var varItem = "Dresses";
            } else {
                $("#Styles2").show();
                $("#Section3").show();
                $(".accordion").accordion("option", "active", 2);
            }
        }
    });
});

$(function () {
    $(".accordion").accordion({
        event: "click",
        autoHeight: false,
        collapsible: true,
        active: false
    });
});