title: show/hide bootstrap accordion panel with jQuery
body: <p>I have a bootstrap accordion. Now I want to enable a <code>panel</code> only on a certain scenario. When one of my panel is valid, only then the other panel <code>should be collapsible</code>    </p>
  
  <pre><code>&lt;div class="panel-group" id="accordion"&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h4 class="panel-title"&gt;
                  &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;Collapsible Group
                      Item #1 &lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
              &lt;form id="myform" action="" method="post"&gt; //when this form is valid, then open the collapseTwo panel
              &lt;div class="panel-body"&gt;
                  &lt;input type="text" id="txtName" name="txtName" /&gt;
                  &lt;br /&gt;
                  &lt;input type="text" id="txtCountry" name="txtCountry" /&gt;
                  &lt;br /&gt;
                  &lt;input id="btn" type="submit" name="submit" value="Submit" /&gt;
                  &lt;br /&gt;
              &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="clickMe" class="panel panel-default"&gt; // this will remain closed unless the above form is not valid
          &lt;div class="panel-heading"&gt;
              &lt;h4 class="panel-title"&gt;
                  &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"&gt;Collapsible Group
                      Item #2 &lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapseTwo" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;
                  //Some data
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
  
          $("#myform").validate({
              rules: {
                  txtName: {
                      required: true
                  },
                  txtCountry: {
                      required: true
                  }
              }
          });
  
          $("#myform").valid();
  
          $('#clickMe').on('shown.bs.collapse', function (e) {     //i click on the panel header
  
              if ($('#myform').valid()) {   //now if the first panel(which contains form) is valid
                 $('#collapseTwo').collapse('show');    //then show the clicked panel
              }
              else {
                  $('#collapseTwo').collapse('hide');  //else always keep it hidden/locked
                  alert('form invalid');
              }
          })
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/isherwood/Lqtd65dm/" rel="nofollow"><strong>Fiddle</strong></a></p>
  
  <p>This is not behaving close to how it should actually function.    </p>
  
  <p>The collapseTwo panel should be locked and an alert message stating that the collapseOne panel is Invalid should be displayed. And if the form is valid then it should be the default behavior of collapsing.</p>