Show a div with slideDown

Question

I have a div I want to show and hide with a check box:

      <li>             
        <label for="">Fixed-term package:</label>               
        <ul>                  
          <li><input id="" type="checkbox" name="package-fixed-term" /></li>               
        </ul>                       
      </li>
      <div id="package-fixed-term-options" class="hidden">

my class "hidden":

.hidden {display: none !important;}

When I check my input control it won't slide down. I can get it to work by adding .removeClass('hidden') tot he line but this is not supposed to be required (e.g. slideUp doesn't need to add back my hidden class) Adding the remove class also kills the delay and slideDown animation. The slideUp works beautifully. Here is the function:

$('input[name="package-fixed-term"]').change(function(){
if ($('input[name="package-fixed-term"]:checked').val() !== undefined) {     
  $('div#package-fixed-term-options').delay(300).slideDown(500);
  return false;
  } else {
  $('div#package-fixed-term-options').delay(300).slideUp(500);
  return false;
  }
});

Answer 1

It's the !important that is causing this issue.

See this fiddle: http://jsfiddle.net/4JYeq/2/

Remove it from the css, and it will work:

.hidden {display: none;}​