Using JQuery/Javascript how do I collapse a jQuery mobile collapsible object with an change event?

Question

I have a collapsible object with two selects inside. I want the collapsible object to collapse when the use selects an option from one of the selects.

Here is my html:

<div data-role="collapsible" data-collapsed-icon=" " data-expanded-icon=" ">
    <h1 class="toggleHolder ui-nodisc-icon" href="#toggles"><span class="displayLang" id="displayLang"></span>&nbsp;/&nbsp;<span class="displayRegion" id="displayRegion"></span></h1>
    <div class="toggleHolder" id="toggleHolder" data-role="main">
        <form>
            <fieldset class="ui-field-contain">
            <label for="langSelect">Language:</label>
                <select name="langSelect" id="langSelect">
                    <option value=" " selected>Select Language</option>
                    <option value="en">English</option>
                    <option value="fr">French</option>
                </select>
            </fieldset>

            <fieldset class="ui-field-contain">
            <label for="regionSelect">Region:</label>
                <select name="regionSelect" id="regionSelect">
                    <option value=" ">Select Province</option>
                    <option class="province" value="ab">Alberta</option>
                    <option class="province" value="bc">British Columbia</option>
                    <option class="province" value="mb">Manitoba</option>
                    <option class="province" value="nb">New Brunswick</option>
                    <option class="province" value="nl">Newfoundland</option>
                    <option class="province" value="ns">Nova Scotia</option>
                    <option class="province" value="on">Ontario</option>
                    <option class="province" value="pe">Prince Edward Island</option>
                    <option class="province" value="qc">Quebec</option>
                    <option class="province" value="sk">Saskatchewan</option>
                </select>
            </fieldset>
        </form>
    </div>
</div>

Here is my script for the first select:

<script>
    $('#langSelect').change(function() {
        $('.ui-collapsible').attr('data-collapsed','true'); 
        $('.ui-collapsible').addClass("ui-collapsible-collapsed");      
    });
</script>

The scripts adds the attribute and the class to the collapsible object but the object doesn't collapse.

Answer 1

Give the following a try:

$(document).ready(function() {
    $('#langSelect').on("change", function() {
        $('.ui-collapsible').collapsible("collapse");     
    });
});