<p>I have some HTML and jQuery that slides a <code>div</code> up and down to show or hide` it when a link is clicked:</p>

<pre class="lang-html prettyprint-override"><code>&lt;ul class="product-info"&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;YOU CLICK THIS TO SHOW/HIDE&lt;/a&gt;
    &lt;div class="toggle"&gt;
      &lt;p&gt;CONTENT TO SHOW/HIDE&lt;/p&gt;
    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<pre class="lang-js prettyprint-override"><code>$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
}
</code></pre>

<p>My question is: How do I use <code>preventDefault()</code> to stop the link acting as a link and adding "#" to the end of my URL &amp; jumping to the top of the page?</p>

<p>I can't figure out the right syntax, I just keep getting an error saying </p>

<blockquote>
  <p>preventDefault() is not a function.</p>
</blockquote>

Try something like:
```
```
$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
    event.preventDefault();
    $(this).next('div').slideToggle(200);
});
```
```
Here is the page about that in the
jQuery documentation