title: how to set slideToggle to work for more than one time
body: <p>I have some nested ul tags and I hide them so that I can apply jQuery slideToggle effect to them( I want to slide each element independently). but when I press each 'li' tag in the first 'ul' all the second 'ul's become visible together.</p>
  
  <p>This how my html code is:</p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;ul class="mainList"&gt;
            &lt;li class="mainItem"&gt;List item&lt;/li&gt;
                       &lt;ul class="subList"&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt; 
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                       &lt;/ul&gt;
            &lt;li class="mainItem"&gt;&gt;List item&lt;/li&gt;
                       &lt;ul class="subList"&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt; 
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                       &lt;/ul&gt;
            &lt;li class="mainItem"&gt;&gt;List item&lt;/li&gt;
                       &lt;ul class="subList"&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt; 
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                       &lt;/ul&gt; 
            &lt;li class="mainItem"&gt;&gt;List item&lt;/li&gt;
                       &lt;ul class="subList"&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt; 
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                       &lt;/ul&gt;
            &lt;li class="mainItem"&gt;&gt;List item&lt;/li&gt;
                       &lt;ul class="subList"&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt; 
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                           &lt;li class="subItem"&gt;List item&lt;/li&gt;
                       &lt;/ul&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And the js file looks like this:</p>
  
  <pre><code>$('.content').click(function(){
     $('.mainList').slideToggle();
  });
  $('.mainItem').click(function(){
     $('.subList').slideToggle();
  });
  </code></pre>