title: How to change toggle button text when pressed?
body: <p>I would like to be able to press a button that says "hide" and then say "show" when the user clicks the button. In the code below the toggle part works, but now I need the "hide" text to turn to "show" once the content is hidden.</p>
  
  <p>I took the toggle code from: <a href="http://thedesignspace.net/MT2archives/000298.html#.UW61YqKG33U" rel="nofollow">http://thedesignspace.net/MT2archives/000298.html#.UW61YqKG33U</a></p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
      function toggle(element) {
      document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none";
      }
      &lt;/script&gt;
  
      &lt;div class="ISBody"&gt;
       &lt;h5&gt;Header&lt;/h5&gt;
       &lt;div class="ISTopLink"&gt;&lt;a href="#ISTop"&gt;Return to Top&lt;/div&gt;
       &lt;div class="ISHide"&gt;&lt;a href="javascript:toggle('pos')"&gt;Hide Products - &lt;/a&gt;&lt;/div&gt;
       &lt;hr&gt;
       &lt;div id="pos" style="display: block;"&gt;
        &lt;div class="ISProductBody"&gt;
         &lt;div class="ISSubHead"&gt;&lt;A HREF="#"&gt;Prodcut Name&lt;/A&gt;&lt;/div&gt;
        &lt;div class="ISList"&gt;
         &lt;ul&gt;
          &lt;li&gt;Text here&lt;/li&gt;
          &lt;li&gt;Text here&lt;/li&gt;
          &lt;li&gt;Text here&lt;/li&gt;
          &lt;li&gt;Text here&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>