Javascript- Using CSS opacity information
<p>I'm puzzled about getting a simple toggle to work that should be fairly simple. I want the div to fade out when the opacity is 100 and fade in when it is 0. <a href="http://jsfiddle.net/mGdcm/8/" rel="nofollow">http://jsfiddle.net/mGdcm/8/</a></p>

<p>Javascript-</p>

<pre><code>$('#toggleButton').click(function() {
if ($('#toggleSection').css("opacity") === 0) {
    $('#toggleSection').fadeIn("slow");
}
else {
    $('#toggleSection').fadeOut("slow");
}
return false;
});
</code></pre>

<p>HTML-</p>

<pre><code>&lt;a href="#" id="toggleButton"&gt;toggle&lt;/a&gt;
    &lt;div id="toggleSection" style="opacity:0;"&gt; &lt;p&gt;Why isn't this working?&lt;/p&gt;&lt;/div&gt;
</code></pre>
