Question

I’m writing a simple jquery animation to show/hide a block of stuff when the title is clicked.
The markup looks like this:

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

My javascript looks like this:

        $(".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') );
        }

    });

This works BUT when I click the title the second time to hide the .info <div> the title gets hidden as well. WHY?!

Answer 1

demo : http://jsfiddle.net/RQ2Cw/1/

instead of parent use closest, and instead ofchildren use find

$(".infoblock h2").click(function(event) {
    //console.log('show info');
    if ($(this).closest('.infoblock').hasClass('off')) {
        $(this).closest('.infoblock').removeClass('off');
        $(this).closest('.infoblock').addClass('on').find('.info').show(300);
        console.log('On function. Parent class= ' + $(this).closest('.infoblock').attr('class'));

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

});​

or :

$(".infoblock h2").click(function(event) {
    var _parent = $(this).closest('.infoblock');
    if (_parent.hasClass('off')) {
        _parent.removeClass('off').addClass('on').find('.info').show(300);

    } else if (_parent.hasClass('on')) {
        _parent.removeClass('on').addClass('off').find('.info').hide(300);
    }

});​