Show/hide child elements within a nested list block

Question

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 Client
    </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>

Answer 1

$('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.