Using on('click') event with jQuery and changeclass only fires once
<p>In the script below, the first click on the "toggleExtras" span works. But subsequent clicks do nothing. I'm trying to use the on('click') method along with a toggleClass to define events for both toggled and untoggled states.</p>

<pre><code>    jQuery(document).ready(function()
    {
        jQuery('.toggleExtras').on('click', function(e)
        {
            //jQuery('.extras').slideToggle(); //This works but bounces twice.
            jQuery('.extras').show();
            jQuery('.toggleExtras').text('Hide Advanced Options');
            jQuery('.toggleExtras').toggleClass('toggleExtras toggleExtrasHide');
        });

        jQuery('.toggleExtrasHide').on('click', function(e)
        {
            jQuery('.extras').hide();
            jQuery('.toggleExtrasHide').text('Show Advanced Options');
            jQuery('.toggleExtrasHide').toggleClass('toggleExtrasHide toggleExtras');
        });
    });
</code></pre>

<p>HTML:</p>

<pre><code>    &lt;span class="toggleExtras"&gt;Show Advanced Options&lt;/span&gt;
</code></pre>
