slideDown function needs two click to work

Question

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?

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.

Here is my JS:

    function showCart() {
    $("#rollDown").click(function() {
        $("#shopping_cart_page").slideDown();
    });

    /* not relevant for this */
    emptyBag = document.getElementById("emptyBag");
    emptyBag.addEventListener("click", emptyCart);

}

And here is my HTML:

<div id="navbar">
                <ul>
                    <li><a href="products.html">Products</a></li>
                    <li><a href="index.html#about">About</a></li>
                    <li><a href="index.html#giveaways">Giveaways</a></li>
                    <li><a href="index.html#contact_field">Contact </a></li>
                    <li><a id="rollDown">Shopping Bag</a></li>

                </ul>
</div>

Answer 1

Here's a simple example:

jQuery:

$(document).ready(function(){ // Just adding the click event inside the document ready method should do the trick for you.
   $("#rollDown").click(function() {
      $("#shopping_cart_page").slideToggle();
      });
   });

HTML

<input type="submit" id="rollDown" value="Toggle"/>
<div id="shopping_cart_page">Hi</div>

Fiddle: http://jsfiddle.net/64gn1unk/