jquery toggle individually

Question

My html is something like this:

<a class="tableheadlink" href="#">Impressions</a> <a href="#"><img src="images/table-sort.png" alt="" /></a>
<div class="filter-head">
    <form>
        <select name="website" class="rounded-all no-padding">
            <option value="opt1">&gt;</option>
            <option value="opt2">&lt;</option>
            <option value="opt3">=</option>
        </select>
        <input name="q" type="text" class="rounded-all small">
    </form>
</div>

jquery something like this:

        $(".filter-head").hide();
        $("a.tableheadlink").click(function(){
            $(".filter-head").toggle();
            return false;
        });

How do i tell it to toggle each instant of the html section individually? There is about 10 instances of it on the page and the toggle will just toggle all using my code.

Thanks

Answer 1

You need to find the .filter-head you want relative to this, for example:

$(".filter-head").hide();
$("a.tableheadlink").click(function(){
    $(this).nextAll(".filter-head:first").toggle();
    return false;
});

What this does is go from this then uses .nextAll() with your class selector and gets the :first one it encounters to toggle. The reason for .nextAll() instead of .next() is that there is that other link in-between.