title: How to trigger Bootstrap 3 data-toggle with JQuery?
body: <p>I have form that has two check box elements. Those two will show/hide additional form elements depends if they are checked or not. Then I have tried to implement feature where user clicks on add new record. In that case all form data should be cleared out including those two check box elements. However, I get both elements to be unchecked but data-toggle didn't hide the elements. Here is example of my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.account-type').on('change', checkFormFld);
  
  function checkFormFld() {
    var checked = false,
      containerID = $(this).data('target'),
      checkboxes = $('.account-type');
  
    $('.account-type').each(function() {
      checked = checked || $(this).is(':checked');
    });
  
    $(containerID + ' :input').prop('disabled', !$(this).is(':checked'));
    checkboxes.prop('required', !checked); // Set required attribute to false.
  }
  
  $('#account_goback').on('click', clearForm);
  
  function clearForm(e) {
    e.preventDefault();
    $('.frm-Submit')[0].reset();
    $('.frm-Submit .collapse').collapse('hide');
    $('.account-type').trigger('change', checkFormFld);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
  &lt;div id="searchaccount_container" class="collapse in"&gt;
    &lt;div class="row"&gt;
      &lt;div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
        &lt;button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#saveaccount_container,#searchaccount_container"&gt;
            &lt;span class="glyphicon glyphicon-plus-sign"&gt;&lt;/span&gt; New Account
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="saveaccount_container" class="collapse"&gt;
    &lt;div class="row"&gt;
      &lt;div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
        &lt;button type="button" class="btn btn-primary" name="account_goback" id="account_goback" data-toggle="collapse" data-target="#saveaccount_container,#searchaccount_container"&gt;
          &lt;span class="glyphicon glyphicon-circle-arrow-left"&gt;&lt;/span&gt; Go Back
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off"&gt;
      &lt;div class="form-group required"&gt;
        &lt;label class="control-label" for="fname"&gt;&lt;span class="label label-primary"&gt;First Name:&lt;/span&gt;&lt;/label&gt;
        &lt;input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required&gt;
      &lt;/div&gt;
      &lt;div class="form-group required"&gt;
        &lt;label class="control-label" for="lname"&gt;&lt;span class="label label-primary"&gt;Last Name:&lt;/span&gt;&lt;/label&gt;
        &lt;input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required&gt;
      &lt;/div&gt;
      &lt;div class="form-group required"&gt;
        &lt;label class="control-label" for="email"&gt;&lt;span class="label label-primary"&gt;Email address:&lt;/span&gt;&lt;/label&gt;
        &lt;input type="email" class="form-control check-existence" name="frm_email" id="frm_email" placeholder="Enter email" maxlength="80" required&gt;
      &lt;/div&gt;
      &lt;div class="form-group required"&gt;
        &lt;label class="control-label" for="type"&gt;&lt;span class="label label-primary"&gt;Account Type:&lt;/span&gt;&lt;/label&gt;
        &lt;div class="checkbox"&gt;
          &lt;label for="user"&gt;
              &lt;input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required&gt; 
              &lt;span class="label label-default"&gt;User&lt;/span&gt;
          &lt;/label&gt;
          &lt;label for="staff"&gt;
              &lt;input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required&gt; 
              &lt;span class="label label-info"&gt;Staff&lt;/span&gt;
           &lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="user-account" class="collapse"&gt;
        &lt;div class="form-group required"&gt;
          &lt;label class="control-label" for="active"&gt;&lt;span class="label label-default"&gt;Active User:&lt;span&gt;&lt;/label&gt;
          &lt;select class="form-control" name="frm_activeuser" id="frm_activeuser" required disabled&gt;
            &lt;option value=""&gt;-- Select the option --&lt;/option&gt;
            &lt;option value="0"&gt;No&lt;/option&gt;
            &lt;option value="1"&gt;Yes&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="form-group required"&gt;
          &lt;label class="control-label" for="admin"&gt;&lt;span class="label label-default"&gt;System Admin:&lt;/span&gt;&lt;/label&gt;
          &lt;select class="form-control" name="frm_systemadmin" id="frm_systemadmin" required disabled&gt;
            &lt;option value=""&gt;-- Select the option --&lt;/option&gt;
            &lt;option value="0"&gt;No&lt;/option&gt;
            &lt;option value="1"&gt;Yes&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="staff-account" class="collapse"&gt;
        &lt;div class="form-group required"&gt;
          &lt;label class="control-label" for="activestaff"&gt;&lt;span class="label label-info"&gt;Active Staff:&lt;span&gt;&lt;/label&gt;
          &lt;select class="form-control" name="frm_activestaff" id="frm_activestaff" required disabled&gt;
            &lt;option value=""&gt;-- Select the option --&lt;/option&gt;
            &lt;option value="0"&gt;No&lt;/option&gt;
            &lt;option value="1"&gt;Yes&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1"&gt;
          &lt;button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you run example and un-comment line of code in <code>clearForm</code> function you can see that hidden container will slide up but won't show up if I click again. Is there a way to achieve this to work with JQuery? </p>