How do I modify this code to allow a different element to trigger the event?
<h3>HTML</h3>

<pre><code>&lt;div id="sidebar"&gt;
&lt;ul&gt;
    &lt;li&gt;
        &lt;h2&gt;
            HEADER
        &lt;/h2&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;li3&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;li2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;li3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<h3>jQuery</h3>

<pre><code>$(document).ready(function () {
    $('li').click(function () {
        if ($('ul', this).is(":hidden")) {
            $('ul', this).slideDown("slow");
        }
        else {
            $('ul', this).slideUp("slow");
        }
    }
);
});
</code></pre>

<p>I only want <code>slideUp()</code>, <code>slideDown()</code> to be reached if the <code>&lt;h2&gt;</code> is clicked.  Currently, both are called if any <code>&lt;li&gt;</code> is clicked.  </p>

<p>How can I fix this?</p>
