jQuery Toggle with For Loop

Question

Here's my HTML,

{% for loop several times %}

<a href="#" class="showhide">Button</a><br />
<div class="dropdown">
    <a href="#">Update</a>
    <a href="#">Delete</a>
</div>

{% endfor %}

Also,

$(document).ready(function () {
$('.showhide').click(function() {
    $('.dropdown').toggle();
});
});
$(document).mouseup(function(e) {
var container = $(".dropdown");
if(container.is(':visible')&&!$(e.target).closest('.dropdown').length){
    container.hide();}
});
});

Divs are opening & closing fine. But the problem is that since I've a for loop, "Button" is appearing several times on one screen & if I'm clicking on just one button all other buttons also opening & closing the the divs with just one click.

How can I make them separately open the divs?

Dij · Accepted Answer · 2017-10-08 07:59:14Z

1

you need to target only the next .dropdown to each .showhide button so you can use $(this).nextAll('.dropdown:lt(1)')

$(document).ready(function () {
$('.showhide').click(function(e) {
$(this).nextAll('.dropdown:lt(1)').toggle();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="showhide">Button</a><br />
<div class="dropdown">
<a href="#">Update</a>
<a href="#">Delete</a>
</div>

edited Oct 8, 2017 at 7:59

answered Oct 8, 2017 at 7:47

Dij

9,8184 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user8733268 Over a year ago

Sir, everything has stopped working after adding this !

user8733268 Over a year ago

Thank You Sir, Working perfectly fine :)

Collectives™ on Stack Overflow

jQuery Toggle with For Loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related