simple slideDown not working

simple slideDown not working

Banging my head against the wall here. I got a very simple script, 3 lines of code and trying to do one of the most basic things in jQuery, slideDown().

Can someone please tell me WTF is going on?

  1. <!DOCTYPE html>
    <html>
    <head>
    <style>
    .coupon_code_wrapper{
        float:left;
        height:25px;
        border:1px solid #f09;
        width:250px;
    }
    .coupon_code_btn{
        margin-right:10px;
        width:20px;
        float:left;
    }
    .coupon_code{
        visibility: hidden;
        margin-left: 10px;
    }
    .coupon_go{
        margin:0 8px 0 0;
        float:left;
    }
    .coupon{
        float:left;
        margin-top:2px;
        margin-left:8px;
    }
    </style>
      <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>

    <div class="coupon_code_wrapper" >
        <a class="coupon_code_btn" href="#">code</a>
        <div class="coupon_code">
            <form>
                <input class="coupon" type="text" value="Enter Code">
            </form>
            <img class="coupon_go" src="quick_select_go.png" alt="Go"/>
        </div> 
    </div>
    <script>
        $('a.coupon_code_btn').click(function(){
                $(".coupon_code").slideDown('slow');
                $(".coupon_code").css("visibility", "visible");
           });

    </script>           
    </body>
    </html>