Create JQuery toggle using hide and show methods

Create JQuery toggle using hide and show methods

I tried to hide and show a html element using hide() and show() JQueary methods. I wrote a very simple JQueary script for that. Its working but has a problem. its only work corectlly in one loop. after 1st loop its not working what I expected. 

here is my code
------------------------
  2. <html>
  3. <head>
  4. <script src="jquery-1.10.2.min.js"></script>

  6. <script>
  7. $(function(){
  8. $("button").click(function(){
  9. $("#image").hide("slow",function(){
  10. $("button").click(function(){
  11. $("#image").show("slow");
  12. })
  13. });
  14. });
  16. })

  18. </script>

  20. </head>

  22. <body>
  23. <button>toggle</button><br />
  24. <img id="image" src="image.jpg"/>

  26. </body>
  27. </html>

1st loop (thats what I want)
--------
01) when I click on button, image hide.
02) then again when I click on button image get show.

2nd loop
--------
01) when I click on button, image hide.
02) Image will show automatically without button click. (thats the problem)

Thats the prolem. why its not working like 1st loop continuously? why image start showing automatically after 1st loop? I knew JQuery has toggle() method for that kind of work. but this shoud be work theoritically. 

note: My English is not good, because Im not a native english speaker. Im sorry about that.