title: Show Hide DIV with Jquery
body: <p>I have this simple JQuery Show/Hide function that obviously show and hide a div.
  There are three things I cannot do on my own.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
    $('#showHideBox').show();
  
    $('#showHidetoggle').click(function() {
    $("#showHidetoggle").text("Show me")
  
      $('#showHideBox').slideToggle(250);
      return false;
    });
  });
  &lt;/script&gt;
  
  &lt;a href="#" id="showHidetoggle"&gt;Hide Me&lt;/a&gt;
  </code></pre>
  
  <ol>
  <li><p>I am looking for a way to change the text on the anchor tag to say show/hide.
  I know this has been asked before, many times. But I can't seem to find specific examples to my script, so far the text changes on click but not subsequent clicks.</p></li>
  <li><p>The script hides the div by sliding it out of view however, I need a portion on the div visible this way I can attached the button (anchor) tag that the user will click.</p></li>
  <li><p>Finally, when the user clicks hide, the div slides out of view only to reappear when the user refreshes the page.  How can I make the div stay hidden but only appear when the user click the button?</p></li>
  </ol>
  
  <p>An example of what I am trying to accomplished is on this page can be found on <a href="http://www.constantcontact.com" rel="nofollow">constantcontact.com</a>. Look at the footer, you'll see it slides out of view but the button is still visible.</p>
  
  <p>Any help will be greatly appreciated.</p>
  
  <p>Thanks everyone.</p>