title: How to make each <li> toggle with <ul>
body: <p>How can I make just one <code>&lt;li&gt;</code> toggle per <code>&lt;ul&gt;</code>. What is happening with this code is that all <code>&lt;ul&gt;</code> tags are being rendered. which also renders all the <code>&lt;li&gt;</code> tags. I want one <code>&lt;li&gt;</code> to toggle when its corresponding <code>&lt;ul&gt;</code> is clicked on.</p>
  
  <p>code:</p>
  
  <pre><code>&lt;script&gt;
  
     $(document).ready(function(){
        $("ul").click(function(){
           $("li").toggle();
        });
     });
  
  &lt;/script&gt;
  
  
  &lt;body&gt;
     &lt;ul&gt;Toggle between hide() and show()&lt;/ul&gt;
     &lt;li&gt;This is a paragraph.&lt;/li&gt;
     &lt;ul&gt;Toggle between hide() and show()&lt;/ul&gt;
     &lt;li&gt;This is a paragraph.&lt;/li&gt;
  &lt;body/&gt;
  </code></pre>