title: Building a bootstrap accordion and want to add a class to whole panel
body: <p>I am building a bootstrap accordion and when i open a panel I want to apply a style to the whole panel when open and then remove it when closed. I am using CSS and jQuery. I've had a few problems trying to do this; it adds the class to every panel, it doesn't apply the class at all etc. I must admit I'm not the best at jquery but could someone help please. 
  Thanks </p>
  
  <p>This is the html:
      </p>
  
  <pre><code>    &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
              &lt;h4 class="panel-title"&gt;
                  &lt;a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&gt;
                      &lt;i class="fa fa-chevron-down fa-lg"&gt;&lt;/i&gt;
                      Stuff 1
                  &lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"&gt;
              &lt;div class="panel-body text-muted"&gt;
                    Stuff.
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading text-muted" role="tab" id="headingTwo"&gt;
              &lt;h4 class="panel-title"&gt;
                  &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"&gt;
                      &lt;i class="fa fa-chevron-down fa-lg"&gt;&lt;/i&gt;
                      Stuff 2
                  &lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"&gt;
              &lt;div class="panel-body text-muted"&gt;
                  Stuff.
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This is the jquery:</p>
  
  <pre><code>$(document).ready(function(){
   $(".panel-heading").click(function(){
       $(".panel-default").toggleClass("panel-box-shadow");
   });
  });
  </code></pre>