JQuery lock

Question

I need to use the slideDown function from jQuery, for which animated content should be placed under the ".hide" class,

for .hide I had this in my regular css:

.hide { display: none; } 

which conflicts with Bootstrap css as it contains:

 .hide { display: none !important; } 

so when I linked both of these stylesheets, slideDown was'nt working, I tried different versions of .hide in both files, finally removing the .hide from my custom css file, fully working,

so my question is why .hide in custom css affects results when the properties defined in Bootstrap ".hide" and custom css ".hide" are exactly the same except for having "! important" in addition to What (I think, please correct if I am wrong) implies that the user selector will give preference?

I am trying to share a working version of my code using codepen, but I do not know why my code still does not work in codepen: http://codepen.io/anon/pen/RaGJwE

Answer 1

!important always very strong. You can simply get around it if you later use display: block !important; .

The easiest way is not to use “hidden” or “hidden” classes that are aimed at loading. Just change the class to "hideit" or something else like in this updated fiddle: http://codepen.io/anon/pen/MyjXOv