title: use the same button and change text on it: for my show/hide jquery function
body: <p>I would like to display/hide on click of the button my contact form.
  I have following "show - hide" jquery function with two buttons now and I cannot find out how to extend it so it would use the same button for both show and hide and reflected the visibility of the form with its message: </p>
  
  <ul>
  <li>on the first click on button "Write me" it shows the form and changes the button's text to  "I don't want to write any message now".</li>
  <li><p>on another click it hides the form and returns back to "Write me" </p>
  
  <pre><code>  &lt;script&gt;
    $(document).ready(function(){
    $("#hide").click(function(){
    $("#par").hide();
    });
    $("#show").click(function(){
    $("#par").show();
    });
    });
    &lt;/script&gt;
  
  &lt;button id="hide"&gt;Hide&lt;/button&gt;
  &lt;button id="show"&gt;Write me&lt;/button&gt;
  &lt;div id="par"&gt;
  &lt;p&gt;
  &lt;input type="email" name="email" id="email" placeholder="email" autofocus required&gt;
  &lt;/p&gt;
  &lt;p&gt;
      &lt;input type="text" name="subject" id="name" placeholder="subject" autofocus required&gt;
  &lt;/p&gt;
  &lt;p&gt;
      &lt;input type="text" name="message" id="message" placeholder="message" autofocus required&gt;
  &lt;/p&gt;
  &lt;p&gt;
      &lt;input type="submit" name="send" id="send" value="Send"&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  
  
  #par{display:none;}
  </code></pre></li>
  </ul>