jQuery - on link click --> toggle just the div found under link that triggered the event

My application is programmatically generating some html code like this:

<div class="container">
<div class="class1">
<a href="#" class="my-link">some link text 1</a>
</div>
<div class="class2">
some content 1
</开发者_Go百科div>
</div>

<div class="container">
<div class="class1">
<a href="#" class="my-link">some link text 2</a>
</div>
<div class="class2">
some content 2
</div>
</div>
.........
over and over again

Using jQuery when I click on any link (inside the <div class="class1"> ) I want to toggle just the <div class="class2"> found under that link that triggered the event.

As you can see the class names repeat over and over again for every "container" div block.

Any idea how to accomplish this? Thank you!

You could do something like this.

$(".my-link").click(function(){
    $(this).closest("div").next(".class2").toggle();
});

$(".my-link").click( function() {
  $(this).parents(".container").find(".class2").toggle();
})

or

$(".my-link").click( function() {
  $(this).parent().next(".class2").toggle();
})

The "next" jQuery selector returns the next sibling element.

$('.class1').click(function(e) {
  $(this).next().toggle();
});

Try this:

$(function(){
 $(".my-link").click(function(){
  $(this).parent().next(".class2").toggle();
 });
});