jQuery show/hide not working

Question

I'm having the strangest problem with jQuery's hide() and show() functions.

The site I'm working on (development build) is here

On the page, you'll see a product under Featured Products called Hydrate. This product has some flavor options so what I want to do is make it so that when the user clicks the Add to Cart button it shows a layer that is by default hidden. See the two screen shots here:

However, when I click the Add To Cart button, the layer does not appear. The Firebug screenshot below shows what the elements look like after I've clicked the Add To Cart button.

Notice that the element style is "display: block" as per the jQuery norm, which then should override the CSS element style for "display: none". I've done this hundreds of times, if not more and this is the first time it hasn't worked. Now look at the Firebug screenshot below. If I click the red slash-circle next to display:none in the debug console, the layer appears exactly as it should.

Below are the snippets of what I believe are relevant code, but I can't see where the problem is.

CSS Code:

.carouselProduct {float:left; border:2px solid #e9e9e9; width:223px; min-height:242px; margin:18px 2px 0 2px; position:relative; overflow:hidden;}
.productOptions{
    position:absolute;
    bottom:0px;
    left:0px;
    width:211px;
    background: url('../images/black_background_75.png');
    z-index:99999;
    padding: 6px;
    height:170px;
    display:none;
}

JS Code:

$(document).ready(function(){
    $.noConflict();
    jQuery('.add_to_cart_btn').live('click',function(e){
        e.preventDefault();
        $(this).getForm().sendRequest( 'shop:on_addToCart', {update: {'mini_cart': 'mini:cart'} });
    });
    jQuery('.choose_options').live('click',function(e){
        e.preventDefault();
        jQuery('#options_'+jQuery(this).attr('rel')).show();
    });
});

Note: I thought maybe there was some way that something was interfering so I implemented noConflict but it didn't make any difference. Also note that I'm not getting ANY JS errors in Firebug.

HTML Code:

<article class="carouselProduct"> 
    <!--productContent starts here-->
    <article class="productContent">
        <a href="/shop/product/intensity-hydrate"><img class='productImage' src="/uploaded/thumbnails/db_file_img_33_autox126.png" style="margin: 3px;"></a>
        <hgroup>
            <h4>Hydrate</h4>
           <h3>$25.00</h3>
            <h3 class="orange">$15.00</h3>
        </hgroup>
        <strong>Key Benefits:</strong>
        <ul>
            <li>Proper electrolyte balance</li>
            <li>Reduce muscle fatigue & cramping</li>
        </ul>
        </article>
        <!--productContent ends here--> 
        <!--productOptions layer starts here -->
        <div class="productOptions" id="options_1">
            <div class='selectbox1'>
                <label>Flavor</label>
                <select class='my-dropdown' name='product_options[4448804864d703e8b696c3fa7713aa23]'>
                    <option value='Fruit Punch'>Fruit Punch</option>
                    <option value='Orange'>Orange</option>
                </select>
            </div><br>
            <article class="product_btn">
                <a class="yellow_btn" rel="1" title="Add To Cart" href="#" onclick="return $(this).getForm().sendRequest( 'shop:on_addToCart', {update: {'mini_cart': 'mini:cart'},onSuccess: function(){ close_layer(1) } })">Add To Cart</a>
                <a class="gray_btn" title="View More" href="#" onclick="close_layer(1)">Cancel</a>
            </article>
        </div>
        <!--productOptions layer ends here -->
        <!--product_btn starts here-->
        <article class="product_btn">
            <a class="yellow_btn choose_options" title="Add To Cart" href="#" rel="1">Add To Cart</a>
            <a class="gray_btn" title="View More" href="/shop/product/intensity-hydrate">View More</a>
        </article>
    <!--product_btn ends here--> 
</article>

Note that there are two Add To Cart buttons. Only the last one in the code here (the one that shows up initially) has the "choose_options" class on it. Also, on the Cancel button inside the overlay, I have call to a function called close_layer that passes the id in and then runs the jQuery hide() function which also doesn't work.

I've tried everything I can think of. I've disabled other JS and CSS and still it doesn't work. I've console logged everything and added alerts. It IS running the function because it adds the element display style to the hidden div but something isn't letting it override the CSS file.

Any help would be greatly appreciated.

Answer 1

The issue i feel is being cause by specificity

element.style has higher specificity compared to .productoptions because the property is part of the style attribute

Even if you apply the class to the element element.style will be given preference. .

The better option for you is to Remove the style attribute from your HTML..

Add the display:block inside a class..

.block
{
    display : block;
}

---

<div id="options_1" style="display:block">

should now look like

<div id="options_1" class="block">

Now use .addClass() and .removeClass() to specify your logic.

Answer 2

On your page, there are more than one divs has the same ID - 'options_1'. So your code only change one of them. If you do want to show all of them, then you can do it as below:

jQuery('div[id=options_'+jQuery(this).attr('rel')+']').show();

Answer 3

I had a similar problem and after debugging found that I had forced 'display: inline-block !important' in one of the places which was overriding my hide(). Could you check if the !important is used anywhere in the CSS that can be related?