jquery toggle not working

jquery toggle not working

Can someone please tell me where I'm going wrong here? I'm very new at this, but I'm willing to learn. I would like my site to have a custom button that, when clicked, reveals an image. I would like the button to toggle the image to show/hide.
 
Thanks in advance.
 
<html><head>  <style>  p { width:400px; }  </style>  <script src=" http://code.jquery.com/jquery-latest.js"></script></head><body>
<div class="button">CLICK HERE TO COMPARE US TO THE COMPETITION</div>
<style type="text/css">
.button {
 background-color:#2b84b0;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #2b84b0;
 display:inline-block;
 color:#ffffff;
 font-family:arial;
 font-size:18px;
 font-weight:bold;
 padding:6px 24px;
 text-decoration:none;
}.button:hover {
 background-color:#2b84b0;
        color:#ffffff;
}.button:active {
 position:relative;
 top:1px;
        color:#ffffff;
}
</style>





















 <p>
<img src="http://www.weebly.com/uploads/1/3/2/3/13235038/custom_themes/604155929588613584/files/competition_comparison_chart.jpg" alt="Comparison" width="850" height="584"> </img>
</p>
<script>    $("button").click(function () {      $("p").slideToggle("slow");    });
$(document).ready(function() {
  var par = $('p');
  $(par).hide();
 
  $('#button').click(function(e) {
      $(par).slideToggle('slow');
      e.preventDefault();
  });
});
</script> </body></html>