javascript - Toggle individual divs in a loop -

In submitting data within HTML, which prints a div in the page, for every row found in the database , Clicking on each button to toggle every design, trying to find a way to allow each button to sit (with the default of display: none when loading the page) - Something like this:

  function toggle_dive (id) {var divelement = document.getEleme ntById (id); If (division.style.development == 'none') divelement.style.display = 'block'; Other divelement.style.display = 'none'; }   
 An example of the last markup:  
  & lt; Div & gt; & Lt; Div class = "virtual" & 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 = "virtual" & 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;   
  getElementById ()  toggles only the instance of the first div, and  getElementsByClass ()  does not work so far - neither Be sure to do this - appreciate any thoughts very much!  
  
 
 
 First rule, do not insert multiple elements with the same ID.  
 The button you clicked needs to toggle the example, and to get it to show / hide any (or all)  .example  For you, using the [jquery] tag in your question, you can either use a selector to get the nearest  .example  to your button or to get it jQuery You can use the underlying function of ( .siblings () ).  
 I will put  onclick  with my markup individually, and I will tie this custom function in my javascript.  
  Another important thing : If the JavaScript client-side has been disabled, then users will never be able to see your example because they are hidden by default in CSS Are there. A fix will hide with JS in the beginning (see snippet for this).  
  Here's a demonstration of what I mean:   
  
 
 
  $ ('example-trigger'). Click (function () {// use the current button, which triggered the event $ (this) // Toggle the brochure of a particular class. ('.example-label') // Previous element Toggle according to the display status (hide or show). Toggle ();}); // Encourage: Hide examples only if Javascript is enabled // $ ('example-label'). Hide ();   
  .example-label {display: none; / * Disappointed: If JavaScript is disabled, then user will not see anything. /   
  & lt; Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Div & gt; & Lt; Button class = "example-trigger" & gt; Toggle Example 1 & lt; / Button & gt; & Lt; span class = "example-label" & gt; Example 1 & lt; / Span & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Button class = "example-trigger" & gt; Toggle example 2 & lt; / Button & gt; & Lt; span class = "example-label" & gt; Example 2 & lt; / Span & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Button class = "example-trigger" & gt; Toggle Example 3 & lt; / Button & gt; & Lt; Span class = "example-label" & gt; Example 3 & lt; / Span & gt; & Lt; / Div & gt;