Onclick button show div (the div should hide the button in the process)

Onclick button show div (the div should hide the button in the process)

Hey all i have div and within this div i have a form. I want to show this div when a button is clicked. This all works fine but i also want the original button to be hidden when clicked upon (basicly i want the div to be on top of the button hiding it) When the div is closed (by  completing the form or clicking on the hide button i want the div to dissapear and the button to reappear (all without realoading the page) How can i achieve this.

  1. <div id='d1' style="display: none;">

  2. <form>
  3. <input type="text">
  4. <input type="submit">
  5. </form>
  6. <button id='b2'> Hide Form </button>
  7. </div>
  8. <button id='b1'> Show form </button>

  9. ///show///
  10. $('#b1').click(function(){
  11. $('#d1').show();
  12. })
  13. ///hide///
  14. $('#b2').click(function(){
  15. $('#d1').hide();
  16. })