jQuery hide / show elements

[Paramasivan]

I have 2 elements cols3 and cols4. If either one is hidden then by clicking a button that element is to be displayed.
But if both elements are hidden then by clicking a button only element col3 is to be displayed.

I tried with the following code :

$('#plusexp')
.click(function() {
if ($('.cols3:visible')) {
if ($('.cols4:hidden')) {
$('.cols4').show();
}
}
else if ($('.cols4:visible')) {
if ($('.cols3:hidden')) {
$('.cols3').show();
}
}

$('.cols3').show();

});

but if both are hidden, by clicking the button both are displayed instead of only cols3.

Any help?

[VIPStephan]

Try it with wrapping an else {} statement around the last function.

[Paramasivan]

I have done with the following code:

$('#plusexp').click(function() {
    var $cols3 = $('.cols3');
    if ($cols3.is(':visible')){
        $('.cols4').show();
    };
    $cols3.show();
});

The following code also works :

$('#plusexp').click(function() {
    if ($('.cols3').is(':hidden')) {
        $('.cols3').show();
    } else {
        if ($('.cols4').is(':hidden')) {
            $('.cols4').show();
        }
    }
});