title: Bootstrap nested accordion font-awesome icons
body: <p>I've a 3 level nested bootstrap accordion which is working fine, but I want a change in the <em>panel-heading div</em> where I can use a font-awesome icon <code>fa fa-chevron-down</code> when the accordion is opened (Without affecting the nested accordions) and <code>fa fa-chevron-right</code> when accordion is collapsed. I'm using this code to changing the icon:</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>$('div.panel-collapse.collapse').on('shown.bs.collapse', function() {
    $(this).parent().find(".fa-chevron-right").removeClass("fa-chevron-right").addClass("fa-chevron-down");
    $(this).parent().find('.panel-heading').css('background', '#0271BC');
  }).on('hidden.bs.collapse', function() {
    $(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-right");
    $(this).parent().find('.panel-heading').css('background', '#02A4EF');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"&gt;
  
  &lt;a href="#aspnetcore" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#accordion"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading outer web"&gt;
        &lt;h4 class="panel-title fonter font-light-text"&gt;
          &lt;i class="fa fa-chevron-down pull-right"&gt;&lt;/i&gt; Getting Starting with ASP.NET Core 1.0
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="aspnetcore" class="panel-collapse collapse outer-arrow"&gt;
        &lt;div class="panel-body"&gt;
          &lt;div class="panel-group" id="webdevelopment"&gt;
            &lt;a href="#frontend" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#webdevelopment"&gt;
              &lt;div class="panel panel-default"&gt;
                &lt;div class="panel-heading middle-link-web"&gt;
                  &lt;h4 class="panel-title font-light-text"&gt;
                    &lt;i class="fa fa-chevron-down pull-right"&gt;&lt;/i&gt; Front-End
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div id="frontend" class="panel-collpase collapse outer-arrow"&gt;
                  &lt;div class="panel-body"&gt;
                    &lt;div class="panel-group" id="webdevelopment"&gt;
                      &lt;a asp-controller="Web" asp-action="Grunt" class="accordion-toggle lab-link"&gt;
                        &lt;div class="panel panel-default"&gt;
                          &lt;div class="panel-heading middle-link"&gt;
                            &lt;h4 class="panel-title font-light-text"&gt;
                              Grunt Task Runner
                            &lt;/h4&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/a&gt;
                      &lt;a href="#angular" class="accordion-toggle tutorial-panel-heading inner-link" data-toggle="collapse" data-parent="#frontend"&gt;
                        &lt;div class="panel panel-default"&gt;
                          &lt;div class="panel-heading middle-link-web"&gt;
                            &lt;h4 class="panel-title font-light-text"&gt;
                              &lt;i class="fa fa-chevron-down pull-right"&gt;&lt;/i&gt; Angular
                              2
                            &lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div id="angular" class="panel-collpase collapse"&gt;
                            &lt;div class="panel-body"&gt;
                              &lt;a asp-controller="Web" asp-action="Angular" class="accordion-toggle lab-link"&gt;
                                &lt;div class="panel panel-default"&gt;
                                  &lt;div class="panel-heading middle-link"&gt;
                                    &lt;h4 class="panel-title font-light-text"&gt;
                                      Introduction to Angular 2
                                    &lt;/h4&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                              &lt;/a&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/a&gt;
  
                      &lt;a class="accordion-toggle lab-link"&gt;
                        &lt;div class="panel panel-default"&gt;
                          &lt;div class="panel-heading middle-link"&gt;
                            &lt;h4 class="panel-title font-light-text"&gt;
                              LESS and SASS &lt;i class="fa fa-cog fa-spin fa-fw"&gt;&lt;/i&gt;
                            &lt;/h4&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/a&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/a&gt;
            &lt;a href="#backend" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#webdevelopment"&gt;
              &lt;div class="panel panel-default"&gt;
                &lt;div class="panel-heading middle-link-web"&gt;
                  &lt;h4 class="panel-title font-light-text"&gt;
                    &lt;i class="fa fa-chevron-down pull-right"&gt;&lt;/i&gt; Back-End
                  &lt;/h4&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But this code also change the icons of the nested accordions which are not opened yet. Is there any better way to resolve this issue will be appreciated.</p>