title: Toggling multiple jQuery icons
body: <p>I'm having a few problems with my icon toggling in jQuery.</p>
  
  <p>The html for each toggled section is:</p>
  
  <pre><code>&lt;h2 class="collapse"&gt;&lt;span class="ui-icon ui-icon-triangle-1-e"&gt;&lt;/span&gt;Section 1.1&lt;/h2&gt;
  &lt;p&gt;Hidden text.&lt;/p&gt;
  </code></pre>
  
  <p>And the javaScript: </p>
  
  <pre><code>jQuery(document).ready(function () {
      $(".collapse").click(function () {
          $(this).next().toggle();
          $("span").toggleClass("ui-icon-triangle-1-s");
      }).next().hide();
  });
  </code></pre>
  
  <p>JSfiddle also <a href="http://jsfiddle.net/LADransfield/gy653bpL/14/" rel="nofollow">here</a>.</p>
  
  <p>When I click any of the collapsible sections, all of the icons change at once, though not all of them expand/collapse.</p>
  
  <p>I also can't get my icon to be on the same line as the text, though that's a smaller problem.</p>