This question has already been answered:

$('.button').click(function() { $('.down_i').slideToggle(); })

Using the button with the button class, I use the slideToggle function on the block with the down_i class that I down_i .
When .down_i blocks become two and more, when you click on a .button any of the blocks, all existing .down_i open at once.
How to make it so that only the .down_i the block on which I click is opened?

HTML:

 <div class="items_1-c"> <div class="item"> <div class="up_i"> <div class="button">驻专讟讬诐 谞讜住驻讬诐</div> </div> <div class="down_i"> <h4 class="h4">:驻专讟讬诐 谞讜住驻讬诐</h4> </div> </div> <div class="item"> <div class="up_i"> <div class="button">驻专讟讬诐 谞讜住驻讬诐</div> </div> <div class="down_i"> <h4 class="h4">:驻专讟讬诐 谞讜住驻讬诐</h4> </div> </div> <div class="item"> <div class="up_i"> <div class="button">驻专讟讬诐 谞讜住驻讬诐</div> </div> <div class="down_i"> <h4 class="h4">:驻专讟讬诐 谞讜住驻讬诐</h4> </div> </div> </div>

Reported as a duplicate at Grundy. javascript 13 Jul '17 at 14:34 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • what does down_i of that block mean to which button I click - how do you determine that down_i belongs to some block? - Grundy
  • Because it is wrapped in a block like a button, why is there anything to determine here ?? - LiEm
  • @ soledar10, it will not work that way :-) see its markup. And in your example, for some reason, .btn instead of .button - Grundy
  • 2
    For a better understanding, it was worthwhile to add a minimal example that reproduces the problem. And here there is a bunch of unrelated to the question markup. Well, $(this).closest('.item').find(".down_i").slideToggle() . - Regent
  • @Regent, well, or $(this).parent().next().slideToggle() - Grundy

1 answer 1

From the button go to the block .item , in which it is located, then in this block we look for the block .down_i :

 $('.button').on("click", function() { $(this).closest(".item").find(".down_i").slideToggle() }); 
 <div class="item"> <div class="up_i"> <div class="button">Button1</div> </div> <div class="down_i">Text1</div> </div> <div class="item"> <div class="up_i"> <div class="button">Button2</div> </div> <div class="down_i">Text2</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>