title: CSS / Javascript Show / Hide DIV using a CSS class?
body: <p>I've googled around and found many scripts for hiding and showing DIV contents, as a toggle on button click. </p>
  
  <p>But they are work using ID's.</p>
  
  <p>I would like to do the same thing BUT I want to use a class instead of an id so that if I want to have 20 DIV's that toggle ... Hide / Show I don't have to add extra code.</p>
  
  <p>Here is some code:</p>
  
  <pre><code>&lt;script language="javascript"&gt; 
  function toggle() {
      var ele = document.getElementById("toggleText");
      var text = document.getElementById("displayText");
      if(ele.style.display == "block") {
              ele.style.display = "none";
          text.innerHTML = "show";
      }
      else {
          ele.style.display = "block";
          text.innerHTML = "hide";
      }
  } 
  &lt;/script&gt;
  
  &lt;a id="displayText" href="javascript:toggle();"&gt;show&lt;/a&gt; &lt;== click Here
  &lt;div id="toggleText" style="display: none"&gt;&lt;h1&gt;peek-a-boo&lt;/h1&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Can anyone help with this please?</p>
  
  <p>Thanks</p>