title: toggleClass on separate child elements
body: <p>Im using the toggleClass method in a function like this:</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('section .handle').click(function() {
      $('section h3 i').toggleClass('rotate');
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;div class="handle clearfix"&gt;
                  &lt;h3&gt;item one &lt;i class="fa fa-arrow-down"&gt;&lt;/i&gt;&lt;/h3&gt;
              &lt;/div&gt;
              &lt;ul class="panel"&gt;
                  &lt;li&gt;lorem ipsum&lt;/li&gt;
                  &lt;li&gt;lorem ipsum&lt;/li&gt;
                  &lt;li&gt;lorem ipsum&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/section&gt;
  &lt;section&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;div class="handle clearfix"&gt;
                  &lt;h3&gt;item two &lt;i class="fa fa-arrow-down"&gt;&lt;/i&gt;&lt;/h3&gt;
              &lt;/div&gt;
              &lt;ul class="panel"&gt;
                  &lt;li&gt;lorem ipsum&lt;/li&gt;
                  &lt;li&gt;lorem ipsum&lt;/li&gt;
                  &lt;li&gt;lorem ipsum&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>now the problem is that i have several "i" elements and i need the class to be toggled on each single element, while like this the class is toggled on all of them.</p>