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();
}
);
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');
});
});
untested but try:
$("div.MoreResultsTrigger").click(function (e)
{
$(this).next().slideToggle('fast');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With