how to increase div id to apply the function

Question

<button class="btn btn-square uppercase bold blue pull-right" type="submit" 
id="button-1"><i class="icon-eye"></i> Ticket Details</button>
<div class="row d-none" id="content-1"></div>

I have to repeat the above code with increamenting the id how should i do that by using the below code

$("#button-1").click(function(){
    $("#content-1").toggle("slide");
});

Possible duplicate of [Dynamically setting div id in JavaScript or jQuery](https://stackoverflow.com/questions/7514924/dynamically-setting-div-id-in-javascript-or-jquery) — Sangam Belose, Mar 09 '18 at 07:24

score 0 · Answer 1 · answered Mar 09 '18 at 06:51

0

This code will do it for id 1 to 10.

for (var i = 0; i < 10; i++) {
    $("#button-" + i).click(function () {
        $("#content-" + i).toggle("slide");
    });
}

answered Mar 09 '18 at 06:51

pitaridis

2,457
3
22
39

score 0 · Answer 2 · answered Mar 09 '18 at 07:03

0

First, count all the buttons that you need to create a click function for:

var button_count = $("button").length; //you may also use class here

Then do a loop:

for (var i = 0;i<=button_count;i++) {
    $("#button-"+i).click(function () {
        $("#content-"+i).toggle("slide");
    });
}

answered Mar 09 '18 at 07:03

tomjosef

865
6
21

glad to be of help. i would greatly appreciate if you would mark my answer as accepted or upvote it if it solved your problem. thanks. – tomjosef Mar 21 '18 at 19:13

how to increase div id to apply the function

2 Answers2