Having Issue On Bootstrap 3 SlideDown() hidden Element

Question

Can you please take a look at this demo and let me know why the change() function is not able to slideDown() a hidden element 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 the other answers have already mentioned the issue is boostrap has a style like this

.hidden{
  display: none !important;
}

One way to solve this is by removing hidden class.

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

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

Answer 2

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

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

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