I'm working on a project for an MMO "guild" that gives members of the guild randomly generated tasks for the game. They can "block" three tasks from being assigned.

The lists will look something like this:

<ul>
    <li class="blocked">Task that is blocked</li>
    <li class="blocked-open">Click to block a task</li>
    <li class="blocked-open">Click to block a task</li>
</ul>

The blocked-open class means they haven't chosen a task to block yet. The blocked task means they've already blocked a task. When they click the list item, I want this to appear:

<ul class="tasks-dropdown no-display">
    <li><h1>Click a Task to Block</h1></li>
        <ul class="task-dropdown-inner">
            <?php
                //output all tasks
                    foreach($tasks as $task) {
                        echo '<li class="blocked-option"><span id="'.$task.'">'.$task.'</span></li>';
                        }
            ?>
            <br class="clear" />
        </ul>
</ul>

I don't quite know how, when the user clicks the .blocked-open line-item, to show that dropdown under only the one they clicked.

My jQuery looked like this before I became confused.

$("li.blocked-open").click(function() {
    $("ul.no-display").slideToggle("900");
    });

    $(".blocked-option span").click(function() {
        var task = $(this).attr('id');
            alert("You have blocked: " + task);
            location.reload(true);
        });

I tested it by putting the dropdown under a line item in the code, and it worked fine, but when I have more than one dropdown in the code, clicking on one line item toggles all the dropdowns. I'm not sure what to do. :-p.