jQuery $this problems
<p>I have the following code:</p>

<pre><code>&lt;ul class="cssdropdown"&gt;
    &lt;li class="headlink"&gt;RANGE
        &lt;ul class="innerDrop"&gt;
            &lt;li&gt;Range Child&lt;/li&gt;
        &lt;ul&gt;
    &lt;li&gt;
    &lt;li class="headlink"&gt;HOME
        &lt;ul class="innerDrop"&gt;
            &lt;li&gt;Home Child&lt;/li&gt;
        &lt;ul&gt;
    &lt;li&gt;
&lt;/ul&gt;
</code></pre>

<p>I'm trying to toggle the <code>&lt;ul class="innerDrop"</code> with some jQuery. And I need to do it by adding a class the <code>hide</code> class which has <code>display:none</code></p>

<p>It hides fine, but when I click on the HOME or RANGE it opens both inner <code>&lt;li&gt;</code> when I just want the one to open.</p>

<p>Here is my jQuery:</p>

<pre><code>$(document).ready(function(){

        $('li.headlink ul').addClass('hide');
        $('#header').append('&lt;div class=\"showpersonal\" onclick=\"toggleMenu()\"&gt;&lt;/div&gt;');
        $('#header').append('&lt;div class=\"showbusiness\" onclick=\"toggleMenu()\"&gt;&lt;/div&gt;');
    });
    function toggleMenu() {
        $('li.headlink ul').toggleClass('hide', this);

    }
</code></pre>
