Make toggle link only effect box in the same parent

Question

So I currently have two toggle boxes set up and there will be more soon, I'd like to keep the JS pretty simple and not have a new script for each area, but whenever I attempt to toggle in one place it applies the function to both other the toggle-content boxes I have set up.

In order to see both areas, open the first one and close it before opening the second so a product is added to the Recently Viewed box

Here's what I have in place now:

$(window).load(function(){
 $('.toggle-link').click(function(e){
     $('.toggle-content').slideToggle();
     e.preventDefault();
  });
 

    $(".toggle-link div").click(function()
    {                     
        $(".toggle-link div").toggle();
    });
});

I tried using $(this).find('.toggle-content').slideToggle(); but still no luck. I know this is a pretty easy fix but just can't figure it out.

Any help would be great!

Answer 1

$(document).ready(function(){
    $('.toggle-link').click(function(e){
        $(this).closest("ul").children('.toggle-content').slideToggle();
        $(this).children('div').toggle();
    });
});