title: slideDown function needs two click to work
body: <p>I'm having a slideDown function on my site. But somehow it doesn't work the first time when you click it. So I need to click two times to make the function work. What can possible be wrong?</p>
  
  <p>I also want the div to slide up when I click on the button again, don't know how I will do this. I tried using slideToggle but it just ended up with the div going up and down a couple of times before closing. Even for this I needed to click two times. </p>
  
  <p>Here is my JS: </p>
  
  <pre><code>    function showCart() {
      $("#rollDown").click(function() {
          $("#shopping_cart_page").slideDown();
      });
  
      /* not relevant for this */
      emptyBag = document.getElementById("emptyBag");
      emptyBag.addEventListener("click", emptyCart);
  
  }
  </code></pre>
  
  <p>And here is my HTML: </p>
  
  <pre><code>&lt;div id="navbar"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="products.html"&gt;Products&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="index.html#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="index.html#giveaways"&gt;Giveaways&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="index.html#contact_field"&gt;Contact &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a id="rollDown"&gt;Shopping Bag&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>