Question

I am creating some documentation for an ActionScript 3 framework that I’ve developed. The feel will be kept as close to the Adobe livedocs as possible for the sake of consistency.

There is a panel to the left where I want to have a tree of the classes categorized by package. The HTML so far looks like this:

<ul id="directory">
    <li class="package">zephyr</li>
    <ul>
        <li><a href="/docs/zephyr/class/foundation.php">zephyr.<strong>Foundation</strong></a></li>

        <li class="package">zephyr.core</li>
        <ul>
            <li><a href="/docs/zephyr/class/core.php">zephyr.core.<strong>Core</strong></a></li>
            <li><a href="/docs/zephyr/class/heart.php">zephyr.core.<strong>Heart</strong></a></li>
            <li><a href="/docs/zephyr/class/manager.php">zephyr.core.<strong>Manager</strong></a></li>
            <li><a href="/docs/zephyr/class/signature.php">zephyr.core.<strong>Signature</strong></a></li>
        </ul>

        <li class="package">zephyr.entity</li>
        <ul>
            <li><a href="/docs/zephyr/class/entity.php">zephyr.entity.<strong>Entity</strong></a></li>
        </ul>
    </ul>
</ul>

You’ll notice that each package has the class package and is always immediately followed by:

<ul>...</ul>

I want to select this <ul> element that is immediately after each li.package in this JQuery snip:

$("li.package").click(function()
{
    var ul = ??; // <---- get relevant ul here

    ul.slideToggle(300);
});

How can I achieve this?

Answer 1

Use

$(this).next('ul');

This means that find the ul element which is next to the clicked li element.

See this fiddle for an example.