title: Dynamically create numbered divs in Javascript + Jquery show/hide
body: <p>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. </p>
  
  <pre><code>for (i=0; i&lt;8; i++) {
  var html = '&lt;div id="eventbox"+i&gt;&lt;/div&gt;';
  content.innerHTML +=  html;
  }
  </code></pre>
  
  <p>I have also the following code in Jquery UI:</p>
  
  <pre><code> function ShowHide(){
  $("#eventbox"+1).animate({"height": "toggle"}, { duration: 1000 });
  }
   &lt;div id="eventbox"&gt;
  &lt;a onclick="ShowHide(); return false;" href="" id="dialog_link"&gt;Show/Hide&lt;/a&gt;&lt;/div
  </code></pre>
  
  <p>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.           </p>