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.