title: Nested Accordion plus/minus icon jQuery class selector trouble
body: <p>I've got nested accordions in Bootstrap and have added a plus/minus icon to the title to toggle on accordion show/hide. The problem is that with the jQuery selectors I'm using, when one of the child accordions show/hide, the plus/minus icon changes -- BUT the parent plus/minus icon changes also. What am I doing wrong here with the selectors?</p>
  <p>Here is the structure:</p>
  <pre><code>&lt;div class=&quot;panel-group&quot; id=&quot;accordion1&quot;&gt;
      &lt;div class=&quot;panel panel-default&quot;&gt;
          &lt;div class=&quot;panel-heading&quot;&gt;
              &lt;h3 class=&quot;panel-title&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-minus&quot;&gt;&lt;/span&gt; &lt;a data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion1&quot; href=&quot;#collapseOne&quot;&gt;Kiewit&lt;/a&gt;&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div id=&quot;collapseOne&quot; class=&quot;panel-collapse collapse in&quot;&gt;
              &lt;div class=&quot;panel-body&quot;&gt;
                  &lt;div class=&quot;panel-group&quot; id=&quot;accordion2&quot;&gt;
                      &lt;div class=&quot;panel panel-default&quot;&gt;
                          &lt;div class=&quot;panel-heading&quot;&gt;
                              &lt;h4 class=&quot;panel-title&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-plus&quot;&gt;&lt;/span&gt; &lt;a data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion2&quot; href=&quot;#collapseOne1&quot;&gt;East&lt;/a&gt;&lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div id=&quot;collapseOne1&quot; class=&quot;panel-collapse collapse&quot;&gt;
                              &lt;div class=&quot;panel-body&quot;&gt;Content here...&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;panel panel-default&quot;&gt;
                          &lt;div class=&quot;panel-heading&quot;&gt;
                              &lt;h4 class=&quot;panel-title&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-minus&quot;&gt;&lt;/span&gt; &lt;a data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion2&quot; href=&quot;#collapseOne2&quot;&gt;West&lt;/a&gt;&lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div id=&quot;collapseOne2&quot; class=&quot;panel-collapse collapse in&quot;&gt;
                              &lt;div class=&quot;panel-body&quot;&gt;Content here...&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;panel panel-default&quot;&gt;
          &lt;div class=&quot;panel-heading&quot;&gt;
              &lt;h3 class=&quot;panel-title&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-plus&quot;&gt;&lt;/span&gt; &lt;a data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion1&quot; href=&quot;#collapseTwo&quot;&gt;Vulcan Materials&lt;/a&gt;&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div id=&quot;collapseTwo&quot; class=&quot;panel-collapse collapse&quot;&gt;
              &lt;div class=&quot;panel-body&quot;&gt;Content here...&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;panel panel-default&quot;&gt;
          &lt;div class=&quot;panel-heading&quot;&gt;
              &lt;h3 class=&quot;panel-title&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-plus&quot;&gt;&lt;/span&gt; &lt;a data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion1&quot; href=&quot;#collapseThree&quot;&gt;Copper Springs&lt;/a&gt;&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div id=&quot;collapseThree&quot; class=&quot;panel-collapse collapse&quot;&gt;
              &lt;div class=&quot;panel-body&quot;&gt;Content here...&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And here is the jQuery:</p>
  <pre><code>$('.collapse').on('show.bs.collapse', function() {
      $(this).parent().find(&quot;.glyphicon-plus:first&quot;).removeClass(&quot;glyphicon-plus&quot;).addClass(&quot;glyphicon-minus&quot;);
    }).on('hide.bs.collapse', function() {
      $(this).parent().find(&quot;.glyphicon-minus:first&quot;).removeClass(&quot;glyphicon-minus&quot;).addClass(&quot;glyphicon-plus&quot;);
    });
  </code></pre>