show elements with style display:none !important (jQuery)

Question

As said in jQuery documentation --- .show()

Note: If using !important in your styles, such as display: none !important, it is necessary to override the style using .css('display', 'block !important') should you wish for .show() to function correctly.

But it seems the style cannot be overridden and the element cannot be shown. Am I doing anything wrong here?

jsfiddle

Answer 1

When you use the attr it can work. jQueries .css() and .prop() both won't work

In this fiddle with attr remove the !important from the javascript and you will see how the CSS !important overrules even the inline styling.

your fiddle

Answer 2

Alternatively you can do it with classes (so all your CSS is in the CSS files themselves, and not being directly altered by javascript): http://jsfiddle.net/FF3mc/4/