Initially hides display: block to be shown using jquery.show ()

I am trying to achieve better minimal markup and optimal CSS usage.

<label id="cart_promocode">Promo-code:
    <span><%= Html.TextBox("PromoCode") %>
       <a href="#" id="lnkApplyCoupon" class="hidden">Apply Coupon</a>
    </span>
</label>

      

        
        
        
      

    

The "Apply Coupon" link should be located below the text box. This is the css I am using. Note that it is <A>

rendered as a block, so it gets its own string.

#cart_promocode a
{
     display: block;
     margin: 4px 0 0 0;
     font-size: 93%;
     color: Blue;
}

.hidden {
     display: none;
}

      

        
        
        
      

    

I'll show and hide it with jQuery with:

 $('#lnkApplyCoupon').show() and hide()

      

        
        
        
      

    

The problem is, I want the element to be initially hidden. The originally applied class 'hidden' does not work.

The best solution I have come up with is

$(function() {
     $('#lnkApplyCoupon').hide();
});

      

        
        
        
      

    

This will hide the link to use the coupon on page load, but if the user hasn't enabled Javascript it won't initially be hidden - and in fact, in this case, I wouldn't want it to appear.

What I am missing is either a trick or a different approach to my CSS.