title: Toggle individual divs in a loop
body: <p>In rendering out data within HTML, which prints out a div down the page, for every row found in the database, I'm trying to find a way to allow each button that sits in each div to toggle the individual example when clicked (with a default of <code>display:none</code> upon loading the page) - something such as:</p>
  
  <pre><code>function toggle_div(id) {
  
      var divelement = document.getElementById(id);
  
      if(divelement.style.display == 'none')
          divelement.style.display = 'block';
      else
          divelement.style.display = 'none';   
  }
  </code></pre>
  
  <p>An example of the final markup :</p>
  
  <pre><code>&lt;div&gt;
    &lt;div class="wordtitle"&gt;Word&lt;/div&gt;
    &lt;div class="numbers"&gt;1&lt;/div&gt;
  
    &lt;div class="definition"&gt;Definition&lt;/div&gt;
    &lt;button class="button" id="show_example" onClick="toggle_div('example')"&gt;Show example&lt;/button&gt;
  
    &lt;div class="example" id="example"&gt;Example 1&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;div class="wordtitle"&gt;Word&lt;/div&gt;
    &lt;div class="numbers"&gt;2&lt;/div&gt;
  
    &lt;div class="definition"&gt;Definition&lt;/div&gt;
    &lt;button class="button" id="show_example" onClick="toggle_div('example')"&gt;Show example&lt;/button&gt;
  
    &lt;div class="example" id="example"&gt;Example 2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>getElementById()</code> only toggles the first div's example, and <code>getElementsByClass()</code> hasn't seemed to work so far - not too sure how to do this - any ideas much appreciated!</p>