Jquery .next() help

Question

I use the following code to hide and show a box on a bunch of search results. Each result has its own toggle and box to show and hide. The problem I have is that clicking any one of the toggles will show and hide ALL of the boxes on the page and NOT just the box for the one result. How can I do this?

Thanks

jQuery(document).ready(function ($) {

    $("div.MoreResultsTrigger").click(function (e)
    {
        $("div.MoreResultsTrigger").next().slideToggle('fast');
    });

});

UPDATED CODE USING HOVER

 $('a.MoreResultsTrigger').hover(
        function () {
            $(this).next().show();
        },
        function () {
            $(this).next().hide();
        }
    );

Answer 1

Use the this keyword since you only want to hide the element next to the one you're clicking on.

jQuery(document).ready(function ($) {

    $("div.MoreResultsTrigger").click(function (e)
    {
        $(this).next().slideToggle('fast');
    });

});

Answer 2

untested but try:

$("div.MoreResultsTrigger").click(function (e)
    {
        $(this).next().slideToggle('fast');
    });

Answer 3

use $(this).next().slideToggle('fast'); that will apply it to ONLY the one you have selected. At the moment its applying the slideToggle to ALL div.MoreResultsTrigger's.

Answer 4

Try this:

jQuery(document).ready(function ($) {

    $("div.MoreResultsTrigger").click(function()
    {
        $(this).next('.toggleable').slideToggle('fast');
    });

});

The addition of the '.toggleable' class to the .next() is just in case you might have other things in between that you don't want to toggle. You would of course have to add the .toggleable class to all elements that you're interested in toggling. Of course, you can replace, and should, replace toggleable with a name that has more meaning.