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/

Answer 3

This is because the hidden class forces an element to always be hidden. I'm pretty sure it does something like:

display: none !important;

So you have to modify your code to remove that class after sliding the element down. Or use your own CSS to hide the element (so you don't have !important there.

If you modify your JSFiddle to have the CSS:

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

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

Answer 4

The hidden class you've added to #hidden-list-1 and #hidden-list-2 is overriding the display property change done 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;
}