Converting toggleClass('hidden') to .toggle() with animation
<p>My first implementation of my personal learning project of dynamically generated webpages and JQuery project utilized checkboxes and toggle("slow") and toggle("fast").  However, being new to CS altogether, managing the state of checkboxes got q bit complex for my first project.  So I switched solely to <code>&lt;label&gt;</code>s and <code>.on('click', function(){...})</code> and <code>$('*').click(function(){...})</code> with <code>.toggleClass('hidden')</code> to handle my UX. The CSS for the hidden class is :</p>

<pre><code>.hidden {
    display: none;
}
</code></pre>

<p>The problem now is that the toggling of the class happens instantaneously, and I would like the user to be able to see the <code>.toggle()</code> just as <code>.toggle('slow')</code> or <code>.toggle('fast')</code>.  how would I convert the following line to achieve this visual feedback?</p>

<pre><code>$(this).toggleClass('hidden');
</code></pre>

<p>I have reviewed the APIs for toggle, toggleClass, and slideToggle, and was curious if a certain combination would work.  If I have to rewrite it to toggle(), how do I include the showOrHide parameter, along with the "show" or "fast" duration, as I need to verify current state, similar to <code>.toggleClass()</code>'s [switch] parameter.  </p>
