title: click element without affecting other elements with the same structure
body: <p>I have an HTML element with same structure but I wanted my jquery to affect only the particular element I clicked instead it affects all elements in the DOM. Here's my <a href="http://jsfiddle.net/kureiii/tnsWj/" rel="nofollow">fiddle</a>.</p>
  
  <pre><code>//HTML Code
  &lt;div class="category"&gt;
  &lt;h3&gt;This is the title&lt;/h3&gt;
  &lt;ul&gt;
      &lt;li&gt;Sub menu one&lt;/li&gt;
      &lt;li&gt;Sub menu two&lt;/li&gt;
      &lt;li&gt;Sub menu three&lt;/li&gt;
      &lt;li&gt;Sub menu four&lt;/li&gt;
      &lt;li&gt;Sub menu five&lt;/li&gt;
      &lt;li&gt;Sub menu six&lt;/li&gt;
      &lt;li&gt;Sub menu seven&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="category"&gt;
      &lt;h3&gt;This is the title&lt;/h3&gt;
  &lt;ul&gt;
      &lt;li&gt;Sub menu one&lt;/li&gt;
      &lt;li&gt;Sub menu two&lt;/li&gt;
      &lt;li&gt;Sub menu three&lt;/li&gt;
      &lt;li&gt;Sub menu four&lt;/li&gt;
      &lt;li&gt;Sub menu five&lt;/li&gt;
      &lt;li&gt;Sub menu six&lt;/li&gt;
      &lt;li&gt;Sub menu seven&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  //jquery
  
  $(function(){
     $('.category &gt; h3').click(function(){
       $('.category &gt; ul').slideToggle("fast");
        });
  
  
  $('.category &gt; h3').click(function(event){
      $(this).toggleClass('clicked')
      });
  
   }); 
  </code></pre>