I have the following code:

<ul class="cssdropdown">
    <li class="headlink">RANGE
        <ul class="innerDrop">
            <li>Range Child</li>
        <ul>
    <li>
    <li class="headlink">HOME
        <ul class="innerDrop">
            <li>Home Child</li>
        <ul>
    <li>
</ul>

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

It hides fine, but when I click on the HOME or RANGE it opens both inner <li> when I just want the one to open.

Here is my jQuery:

$(document).ready(function(){

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

    }