jquery .show() .hide() puzzle
<p>I'm writing a simple jquery animation to show/hide a block of stuff when the title is clicked. 
The markup looks like this:</p>

<pre><code>&lt;section class="infoblock off"&gt;
&lt;h2&gt;&lt;span class="sectiontitle rounded-right"&gt;TITLE (click to show/hide)&lt;/span&gt;&lt;/h2&gt;
&lt;div class="info"&gt;&lt;/div&gt;&lt;!--info--&gt;
&lt;/section&gt;
</code></pre>

<p>My javascript looks like this:</p>

<pre><code>        $(".infoblock h2").click( function(event) {
        //console.log('show info');

        if ( $(this).parent( $('.infoblock') ).hasClass('off') ) {          
            $(this).parent( $('.infoblock') ).removeClass('off');
            $(this).parent( $('.infoblock') ).addClass('on').children( $('.info') ).show(300);
            console.log( 'On function. Parent class= '+$(this).parent( $('.infoblock') ).attr('class') );

        } else if ( $(this).parent( $('.infoblock') ).hasClass('on') ) {
            $(this).parent( $('.infoblock') ).removeClass('on');
            $(this).parent( $('.infoblock') ).addClass('off');
            $(this).parent( $('.infoblock') ).children( $('.info') ).hide(300);
            console.log( 'Off function. Parent class= '+$(this).parent( $('.infoblock') ).attr('class') );
        }

    });
</code></pre>

<p>This works <strong>BUT</strong> when I click the title the second time to hide the <code>.info &lt;div&gt;</code> the  title gets hidden as well. WHY?!</p>
