Expand collapsible div on validation

Expand collapsible div on validation

I have six JQM divs on the page that look like this:

<div class="myDiv" name="accordion" data-role="collapsible">

the first div collapsible is set to false (data-collapsed="false")

On validation I want to expand the next closest div. In my script I’m looking for the label with the class.error and getting the index of the closest div. My alert shows the myindex which displays the right number of the next error array however I can’t get the div with the next error to expand. I was trying to trigger the expand with the index of the div.

Here is my jquery

  1. <script type="text/javascript">
  3.    $(document).ready(function () {
  5.        $('#mastercardForm').validate({
  6. invalidHandler: function(form, validator) {
  7.         if (validator.numberOfInvalids() > 0) {
  8. validator.showErrors();
  9. if ($('label.error').css('display') != 'none')
  10. {
  11. var myindex = $('label.error').closest('div.ui-collapsible').index('.myDiv');
  12. alert(myindex);
  13. $('myDiv').trigger('expand', myindex);
  14. alert(validator.numberOfInvalids());
  15. }
  16.         }
  17.     },
  19.           ignore: "hidden",
  20.            rules: {
  21.                'rad_Type_of_Account': { required: true },
  22.               ApplicantInitial: {
  23.                    required: {
  24.                        depends: function () {
  25.                            return $('input[name=rad_Type_of_Account]:checked').val() == 'Joint';
  26.                        }
  27.                    }
  28.                },
  29.                JointInitial: {
  30.                    required: {
  31.                        depends: function () {
  32.                            return $('input[name=rad_Type_of_Account]:checked').val() == 'Joint';
  33.                        }
  34.                    }
  35.                },
  36. 'rad_Accept': { required: true },
  38.                name: "App_FName", // simple rule, converted to {required:true}
  39.                name: "App_LName"
  40.            }
  42.        });
  43.    });
  45.    });

  46. </script>