How to create many toggle in runtime?

Question

I created a page that displays post with comments using ajax To view the comments user must click comment button correspond to the post For simple understanding, example:

In HTML Block

<button id="btn1">cmt1</button>
<button id="btn2">cmt2</button>

<div id="cmt1">comments</div>
<div id="cmt2">comments</div>

'

I tried of using for loop as

for(var i=0;i<count;i++){
    $("#cmt"+i).hide();
    $("#cmtbtn"+i).click(function(){
       $("#cmt"+i).toggle('slow');
    });
}

But It works well for the last cmtbtn only and whenever i click all other buttons last comment box only displays

I'm saying that is there is a way of for loop or any looping

Update: My Js file is here http://jsfiddle.net/9ss50nzc

please post your code that you have done so far – Amy Jun 24 '15 at 07:40 — Amy, Jun 24 '15 at 07:40
Sry forgetting to display code – Santhosh Kumar Jun 24 '15 at 07:43 — Santhosh Kumar, Jun 24 '15 at 07:43
http://jsfiddle.net/9ss50nzc/ @Amy – Santhosh Kumar Jun 24 '15 at 08:04 — Santhosh Kumar, Jun 24 '15 at 08:04

score 2 · Accepted Answer · answered Jun 24 '15 at 09:55

Try to give a same and unique class to all "Comment Button" and also to "Comment Div". Like example bellow :

<button id="btn1" class="comtbtn"> cmt1 </button>
<button id="btn2" class="comtbtn"> cmt2 </button>
<div id="cmt1" class="comt-div">comments1</div>
<div id="cmt2" class="comt-div">comments2</div>

Then catch the click event on class "comtbtn" . Bellow is the js script to hide show of comment -


    $('.comtbtn').click(function() {
       var btnId = $(this).attr("id");
       var id = btnId.slice(-1);
       $( "#cmt"+id ).toggle( "slow" );
    });

Add css to hide all the comment section when initially loaded to the DOM.


    .comt-div{
      display:none;
    }

Dumisani · Answer 2 · 2015-06-24T09:58:09.340

0

Start with giving your buttons and divs classes

<button id="btn1" class="actionButtons">cmt1</button>
<button id="btn2" class="actionButtons">cmt2</button>
<div id="cmt1" class="actionDivs" style="display:none">comments1<br/>more comments<br/>and even more</div>
<div id="cmt2" class="actionDivs" style="display:none">comments2<br/>another comment<br/>and another one</div>

Then loop through elements with that class name

for(var  i = 0; i < $(".actionButtons").length; i++){
    $(".actionButtons")[i].onclick = function () {
        for(var j = 0; j < $(".actionDivs").length; j++){
            if ($(".actionDivs")[j].id == this.innerText)
                $("#" + this.innerText).show();
            else
                $("#" + $(".actionDivs")[j].id).hide();
        }
    };
}

Fiddle

I hope this takes you closer to your solution.

edited Jun 24 '15 at 09:58

answered Jun 24 '15 at 07:44

Dumisani

2,988
1
29
40

your answer is more for static content. – Amy Jun 24 '15 at 07:45
I know how to implement it but when more comments and more comment button added during runtime by ajax how to assign the jquery – Santhosh Kumar Jun 24 '15 at 07:46
Sorry I missed the Ajax Part – Dumisani Jun 24 '15 at 07:47
I'm saying that is there is a way of for loop or any looping – Santhosh Kumar Jun 24 '15 at 07:57
I guess you'll have to reconstruct your entire question buddy – Dumisani Jun 24 '15 at 08:01
Code Updated. It's a bit messy though – Dumisani Jun 24 '15 at 09:59

score 0 · Answer 3 · answered Jun 24 '15 at 08:16

Is this the sort of thing you want? A means of getting the index of the button which is equivalent to the indexed position of the hidden comment on your document?

You just hide the previous comment and display the new comment.

var oldNode = '';
function showComment = function(index) {

    if (typeof oldNode != undefined) $(oldNode).hide('slow');
    $('.comment:eq('+$(index).index()+')').show();
    oldNode = $('comment:eq('+$(index).index()+')');
}



<button onclick="showComment(this)">cmnt 1</button>
<button onclick="showComment(this)" >cmnt 2</button>

<div class='comment' style='display: none'>comment a</div>
<div class='comment' style='display: none'>comment b</div>

score 0 · Answer 4 · answered Jun 24 '15 at 14:02

0

I got the answer it is possible to toggle inside loop by using traversing. Thanks everyone finally I sort out the answer.

answered Jun 24 '15 at 14:02

Santhosh Kumar

543
8
22

How to create many toggle in runtime?

4 Answers4