CODEWITHSUNDEEP
javascriptjquery
user8733268
user8733268

Reputation:

jQuery Toggle with For Loop

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?

Upvotes: 1

Views: 391

Answers (1)

Dij
Dij

Reputation: 9808

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>

Upvotes: 1

Related Questions