Specifying Elements for jQuery
<p>I have a <code>&lt;ul&gt;</code> containing <code>&lt;h2&gt;</code> headings with text below each. I want to be able to display or hide the text below by clicking the each of the headings. How can I tell jquery to only display the text from within the same <code>&lt;li&gt;</code> when the heading is clicked without creating a seperate if statement for each <code>&lt;li&gt;</code>?</p>

<pre><code>&lt;ul&gt;
 &lt;li&gt;
  &lt;h2&gt;heading&lt;/h2&gt;
  &lt;div id='step'&gt;
   text text text
  &lt;/div&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;h2&gt;heading&lt;/h2&gt;
  &lt;div id='step'&gt;
   text text text
  &lt;/div&gt;
 &lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("li").click(function () {
        if ($("#step").is(":hidden")) {
            $("#step").slideDown("slow");
        } else {
            $("#step").slideUp("slow");
        }
    });
&lt;/script&gt;
</code></pre>
