Dynamically create numbered divs in Javascript + Jquery show/hide

Question

I would like to create numbered divs (such as eventbox1, eventbox2, etc.) in a loop and then have an option to show and hide them.

for (i=0; i<8; i++) {
var html = '<div id="eventbox"+i></div>';
content.innerHTML +=  html;
}

I have also the following code in Jquery UI:

 function ShowHide(){
$("#eventbox"+1).animate({"height": "toggle"}, { duration: 1000 });
}
 <div id="eventbox">
<a onclick="ShowHide(); return false;" href="" id="dialog_link">Show/Hide</a></div

I was wondering how to enable show/hide option of each div. I would like to have a show/hide link in each div and each time it is pressed, only this div hides/shows.

Answer 1

I would create the element using jQuery and bind a handler to the anchor tag at the same time. If you put the anchor tag inside the div, there is no way to show the div once you've hidden it. So I'm attaching the anchor adjacent to the div. Not sure if this is what you want.

for(var i = 0; i < 8; i++) {
    var $div = jQuery("<div></div>").attr("id", "eventbox" + i);
    var $a = jQuery("<a></a>").attr("id", "anchoreventbox" + i)
                              .html("Show/Hide")
                              .click(function() {
                var $a = jQuery(this);
                var eventboxID = $a.attr("id").replace(/anchor/, "");
                jQuery("#" + eventboxID).animate({"height" : "toggle"}, {duration: 1000});
             });
    jQuery(body).append($div);
    $div.after($a);
}

or, instead of using the ID to find the div, you can also use parent():

for(var i = 0; i < 8; i++) {
    var $div = jQuery("<div></div>").attr("id", "eventbox" + i);
    var $a = jQuery("<a></a>").attr("id", "anchoreventbox" + i)
                              .html("Show/Hide")
                              .click(function() {                    
                jQuery(this).parent().animate({"height" : "toggle"}, {duration: 1000});
             });
    jQuery(body).append($div);
    $div.after($a);
}

EDIT so there's a problem here. You can't show the div once you hide it, since the link is inside the div. Perhaps you could put the link outside the div? Not sure what you are trying to accomplish here.

Answer 2

Assuming the following inital structure

<div id="eventbox" />
<div id="content">
    <!-- here come the eventbox+x div's -->
</div>

The following code does what you want I geuss

$(document).ready(function() {
    var html = '';
    var links = '';
    for (i=0; i<8; i++) {
        var event = 'eventbox'+i;
        html += '<div id="'+event+'">'+i+'</div>';
        links += '<a href="" id="a'+event+'">Show/Hide '+i+'</a>&nbsp;';
    }
    $("#content").html(html).find("div").hide();
    $("#eventbox").html(links);
    $("#eventbox a").click(function(eve) {
        eve.preventDefault();
        $("#content div:visible").hide();
        $("#"+this.id.substring(1)).animate({"height": "toggle"}, { duration: 1000 });
        return false;
    });
})

Answer 3

You can do something compact like this:

for(var i = 0; i < 8; i++) {
 $("<div></div>", {"id":"eventbox" + i}).append(
    $("<a></a>").text("Show/Hide").click(function() {
       $(this).closest("div").animate({"height" : "toggle"}, {duration: 1000});
    })).appendTo($(content));
}

But the div isn't openable once closed...I think you want the anchor outside, then it'd be something like:

for(var i = 0; i < 8; i++) {
 $("<div></div>", {"id":"eventbox" + i}).before(
   $("<a></a>").text("Show/Hide").click(function() {
      $(this).next("div").animate({"height" : "toggle"}, {duration: 1000});
   })).appendTo($(content));
}

Another thought is that you don't need the ID on the div unless you have some outside reason, a class would be easier, like this:

for(var i = 0; i < 8; i++) {
 $("<div></div>", {"class":"event"}).before(
    $("<a></a>").text("Show/Hide").click(function() {
       $(this).next(".event").animate({"height" : "toggle"}, {duration: 1000});
    })).appendTo($(content));
}