Error loading 3 SlideDown () Hidden Element

Question

Could you take a look at this demo and tell me why the change() function cannot slideDown() a hidden in Bootstrap 3?

Here is the code I have

 $(function() { $('input:radio').change(function() { if($(this).val()== 'Dog') { $('#hidden-list-1').slideDown(); } if($(this).val()== 'Bird'){ $('#hidden-list-2').slideDown(); } }); }); 

Answer 1

As mentioned in other answers, the problem is that boostrap has a style similar to this

 .hidden{ display: none !important; } 

One way to solve this is to remove the hidden class.

 $('#hidden-list-1').hide().removeClass('hidden').slideDown(); 

Here is a demo version of https://jsfiddle.net/dhirajbodicherla/zzdL5jp7/3/

Answer 2

There seems to be an important tag issue in CSS. From the Bootstrap documentation ( http://getbootstrap.com/css/ ), shows and hidden classes are marked important:

  .show { display: block !important; } .hidden { display: none !important; } 

The css changes applied by jQuery slideDown () are most likely ignored. If you select this and replace with style="display:none;" without importance, slideDown () will work. I added this to the fiddle: https://jsfiddle.net/zzdL5jp7/1/

Answer 3

This is because a hidden class forces an element to always hide. I am sure it is doing something like:

 display: none !important; 

So, you need to change your code to remove this class after the element shift. Or use your own CSS to hide the element (so you don't have !important .

If you change your JSFiddle to have CSS:

 #hidden-list-1 { display: none; } 

And remove the hidden class, you will see that it works as expected.

Answer 4

The hidden class that you added to #hidden-list-1 and #hidden-list-2 overrides the change in the display property made by your JS. Removing the hidden class and declaring both elements hidden in CSS will solve your problem.

Answer 5

update your css code

 .show { display: block !important; } .hidden { display: none !important; }