JQuery toggle button changes text

I'm playing around with JQuery and trying to make a simple program. Basically, I want to a button that toggles the visibility of a paragraph, and I want the text on the button to change with the visibility of "p". The first part works, the second part doesn't.

I know there are other questions asking about this sort of thing, but I've tried to mimmic so many different things and can't get the results, so I figured I'd just ask. Here's the code I have right now.

<script>  $(document).ready(function(){

        $("button").click(function(){

   $("p").toggle();

        });
    });

if (p.style.visibility==="hidden")
   {
       $("button").text("show text");
   }
   else
   {
       $("button").text("hide text");
   }

    </script>

How do I make this work?