views:

17

answers:

1

I have a structure which can have multiple levels e.g.

<li>
    <a class="viewdetails"></a>
    <input type="checkbox" class="11015-11017" id="11015-11017" value="11017" name="list_data[11015-11017]">&nbsp;Food Service
    <ul>
        <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>

When clicking the anchor I'd like to show the immediate ul's. In some circumstances, there could be deeper levels of relationship.

I thought $(this).next('ul').toggle(); may have worked but it won't because there is a input field between the anchor and the next ul.

+1  A: 

Try:

$(this).parent().find('>ul').toggle()

This should get the ul that is the direct child of the links parent.

laurencek
Excellent, I have it working. I had to tweak the siblings div's slightly so they are initially set to display: none;