title: toggle collapse bootstrap/css icon using jQuery when a href link is clicked
body: <p>I am new to bootstrap/css and jQuery. I have tried several solutions found here, but couldn't figure out what I did wrong.</p>
  
  <p>I have a collapsible &lt; div > pane, which is triggered by a "plus/minus icon" or a "course description link". Both triggers work great individually. However, I need to toggle the "plus/minus icon" when the "course description link" is clicked. Right now, the icon just stays the same when the link is clicked.</p>
  
  <p>note: I'd prefer using the "btn icon" class, as it seems to make the icon display nicer.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;h4 id="show_pane"&gt;
          &lt;span class="btn icon" data-toggle="collapse" 
               data-target="#wrapper_ABC100" id="plus_minus_icon"&gt;&lt;/span&gt;
          &lt;a id="course_link" href="#wrapper_ABC100" data-toggle="collapse" 
               data-parent="#wrapper_ABC100"&gt;ABC100 - Test Course 100&lt;/a&gt;
      &lt;/h4&gt;
  &lt;/div&gt;
  
  &lt;div id="wrapper_ABC100" style="height: auto;"&gt;
      &lt;p&gt;My collapsible pane - description for course ABC100&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Bootstrap/CSS:</p>
  
  <pre><code>/* Icon when the collapsible content is show */
  .btn.icon:after {
      font-family: "Glyphicons Halflings";
      content: "\2212";
  }
  
  /* Icon when the collapsible content is hidden */
  .btn.icon.collapsed:after {
      content: "\2b";
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>    $('#show_pane').click(function(){
          $('#course_link').toggle('1000');
          $("span",this).toggleClass("icon-circle-plus icon-plus-sign");
      });
  </code></pre>