jQuery's if $('#foo').is(':hidden') and $('#foo').slideUp() not working when "display: none !important"?
<p>This one works: </p>

<blockquote>
  <p><a href="http://jsfiddle.net/fGnL7/3/" rel="nofollow">http://jsfiddle.net/fGnL7/3/</a>    </p>
</blockquote>

<p>using</p>

<pre><code>$(document.body).click(function () {
  if ($("div:first").is(":hidden")) {
    $("div").slideDown("slow");
  } else {
    $("div").slideUp("slow");
  }
});
</code></pre>

<p>but if for some reason, the element is made <code>display: block</code> by some framework (by Compass/Blueprint's <code>+clearfix</code>), so
I used </p>

<pre><code>display: none !important
</code></pre>

<p>to make it not show on page at first, and then the code will not work.</p>

<blockquote>
  <p>sample: <a href="http://jsfiddle.net/fGnL7/4/" rel="nofollow">http://jsfiddle.net/fGnL7/4/</a></p>
</blockquote>

<p>I also tried adding <code>$("div").css({display: 'block'});</code> or even <code>$("div").css({display: 'block !important'});</code> before it called <code>slideDown()</code> and it doesn't work either. </p>

<blockquote>
  <p>sample: <a href="http://jsfiddle.net/fGnL7/7/" rel="nofollow">http://jsfiddle.net/fGnL7/7/</a></p>
</blockquote>

<p>Is there a way around this?</p>
