bootstrap blocking jquery function

Question

i need to use slideDown function from jQuery, which requires the content to be animated to be put under class " .hide ",

for .hide I had this in my custom css :

.hide {
    display: none;
}

which conflicted with Bootstrap css as it contains :

.hide {
    display: none !important;
}

thus when i linked both these stylesheets, slideDown was'nt working, then i tried diffrent variations of .hide in both files, finally removing .hide from my custom css file completely worked,

so my ques is why does .hide in custom css affect the results when the properties defined in Bootstrap ".hide" and custom css ".hide" are exactly same except having " !important " in addition which (i guess, please correct if i am wrong) implies that custom selector would be given preference?

i am trying to share the working version of my code using codepen, but i dont know why my code still does'nt wrok on codepen : http://codepen.io/anon/pen/RaGJwE

Answer 1

The !important is always very strong. It could just be bypassed if you use a display: block !important; afterwards.

The simpliest way would be to not use the "hide" or "hidden" classes which are targeted by bootstrap. Just change the class to "hideit" or something else like in this updated fiddle: http://codepen.io/anon/pen/MyjXOv