preventDefault() on an <a> tag
I have some html/jquery that slides a div up and down to show/hide it, when a link is clicked:


    <ul class="product-info">
      <li>
        <a href="#">YOU CLICK THIS TO SHOW/HIDE</a>
        <div class="toggle">
          <p>CONTENT TO SHOW/HIDE</p>
        </div>
      </li>
    </ul>

and my jquery...


    $('div.toggle').hide();
      $('ul.product-info li a').click(function(event){
        $(this).next('div').slideToggle(200);
      }			
    );


My question is: How do I use preventDefault() to stop the link acting as a link and adding # to the end of my URL & jumping to the top of the page? I can't figure out the right syntax, I just keep getting an error saying that preventDefault() is not a function.
preventDefault() on an <a> tag
===

I have some html/jquery that slides a div up and down to show/hide it, when a link is clicked:


    <ul class="product-info">
      <li>
        <a href="#">YOU CLICK THIS TO SHOW/HIDE</a>
        <div class="toggle">
          <p>CONTENT TO SHOW/HIDE</p>
        </div>
      </li>
    </ul>

and my jquery...


    $('div.toggle').hide();
      $('ul.product-info li a').click(function(event){
        $(this).next('div').slideToggle(200);
      }			
    );


My question is: How do I use preventDefault() to stop the link acting as a link and adding # to the end of my URL & jumping to the top of the page? I can't figure out the right syntax, I just keep getting an error saying that preventDefault() is not a function.