jQuery UI MultiSelect Widget - Using the custom 'click' event method

Using the widget's 'click' event method '.on("multiselectclick", function (event, ui) {...}' instead of 'change' event

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

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

    $("[name=Item]").multiselect().on('multiselectclick', function (event, ui) {

        $("#Styles1, #Styles2").hide();
        $("#Section1, #Section2, #Section3").hide();
        $(".accordion").accordion("option", "active", false);
                
        //if ( $("[name=Item]").val() === "Dresses") {
        if ((ui.value) === "Dresses" && ui.checked) {
            $("#Styles1").show();
            $("#Section1, #Section2").show();
            $(".accordion").accordion("option", "active", 0);
            var varItem = "Dresses";
        }
        else if ((ui.value) === "baz" && ui.checked) {
            $("#Styles2").show();
            $("#Section3").show();
            $(".accordion").accordion("option", "active", 2);
            var varItem = "baz";
        }
    });
});


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