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');
    });

});