Show/hide child elements within a nested list block

I'm modifying a tree view of some relationships we have, I've managed (with help) to get the checkbox ticking the children of itself but what I'm attempting to do now is by clicking the plus next to each parent display the relevant child levels.

Likewise, if the minus is clicked, it should hide the child elements. The list can contain any number of levels.

<ul id="tree">
    <li>
        <a id="sel_11015" class="viewdetails"></a>
        <input type="checkbox" class="11015" id="11015" value="11015" name="list_data[11015]">&nbsp;A New C开发者_运维百科lient
    </li>
    <li>
        <input type="checkbox" class="11015-21810" id="11015-21810" value="21810" name="list_data[11015-21810]">&nbsp;CSL
    </li>
    <li>
        <a name="sel_11015-11017" class="viewdetails"></a>
        <ul>
            <input type="checkbox" class="11015-11017" id="11015-11017" value="11017" name="list_data[11015-11017]">&nbsp;Food Service
            <li>
                <input type="checkbox" class="11015-11017-11021" id="11015-11017-11021" value="11021" name="list_data[11015-11017-11021]">&nbsp;Food Service 
            </li>
            <li>
                <input type="checkbox" class="11015-11017-11023" id="11015-11017-11023" value="11023" name="list_data[11015-11017-11023]">&nbsp;Heff
            </li>
        </ul>
    </li>
    <li>
        <a name="sel_11015-11019" class="viewdetails"></a>
        <ul>
            <input type="checkbox" class="11015-11019" id="11015-11019" value="11019" name="list_data[11015-11019]">&nbsp;Spar
            <li>
                <input type="checkbox" class="11015-11019-11031" id="11015-11019-11031" value="11031" name="list_data[11015-11019-11031]">&nbsp;Access 10
            </li>
            <li>
                <input type="checkbox" class="11015-11019-27192" id="11015-11019-27192" value="27192" name="list_data[11015-11019-27192]">&nbsp;Apex 2
            </li>
            <li>
                <input type="checkbox" class="11015-11019-12719" id="11015-11019-12719" value="12719" name="list_data[11015-11019-12719]">&nbsp;Recycling Centre
            </li>
            <li>
                <a name="sel_11015-11019-11027" class="viewdetails"></a>
                <ul>
                    <input type="checkbox" class="11015-11019-11027" id="11015-11019-11027" value="11027" name="list_data[11015-11019-11027]">&nbsp;Spar Ambient
                    <li>
                        <input type="checkbox" class="11015-11019-11027-11037" id="11015-11019-11027-11037" value="11037" name="list_data[11015-11019-11027-11037]">&nbsp;Spar Ambient Warehouse
                    </li>
                </ul>
            </li>
            <li>
                <input type="checkbox" class="11015-11019-11075" id="11015-11019-11075" value="11075" name="list_data[11015-11019-11075]">&nbsp;Spar Distribution
            </li>
        </ul>
    </li>
</ul>

$('a.viewdetails').click(function() {
  $(this).next('ul').toggle();
});

Try this. Should work for any depth tree. I'm assuming the 'a' tags are the pluses or minuses.