Question

I’m trying to work out an hide/show function according to, if the div’s are hidden or not. My code looks like this:

    //postInbox/outbox/savedbox show all/hide all
$('.postBoxShowAll').click(function(){
    $('.postBoxContent').slideToggle('fast', function(){
        if($(this).is(':hidden')){
            $('.postBoxShowAll').html('Show all');
        }else{
            $('.postBoxShowAll').html('Hide all');
        }
    });
});
//

* UPDATE *

This worked:

    //postInbox/outbox/savedbox show all/hide all
$('.postBoxShowAll').click(function(){
    $('.postBoxContent').slideToggle('fast', function(){
        if($('.postBoxContent').is(':visible')){
            $('.postBoxShowAll').html('Hide all');
        }else{
            $('.postBoxShowAll').html('Show all');
        }
    });
});
//

But for some reason, it won’t change the text. It slides just fine. How come?

Answer 1

may be try this

$('.postBoxShowAll').click(function() {
    $('.postBoxContent').slideToggle('fast', function() {
        if ($('.postBoxContent').is(':hidden')) {
            $('.postBoxShowAll').html('Show all');
        } else {
            $('.postBoxShowAll').html('Hide all');
        }
    });
});