jQuery show/hide not working

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?

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.

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();

It seems your DOM is messed up. Perhaps you have a missing tag somewhere or something?

Anyway I visited your page and when I change:

jQuery('#options_'+jQuery(this).attr('rel')).show();

to

jQuery('#options_'+jQuery(this).attr('rel')).show().appendTo(jQuery(this).parent())

everything is fine.