CODEWITHSUNDEEP
jquery
ngplayground
ngplayground

Reputation: 21667

jQuery change text on toggle

Below I'm trying to use jQuery to open and close a pane, but I'd also like to use jQuery to toggle the text too. Could someone assist in helping me rename .chatstatus to either open or close when its toggled?

    $('.chatstatus').click(function(){
        $('.mChatBodyFix').slideToggle(500);
        $.cookie('chatPane', $.cookie('chatPane')=='open'?"closed":"open", {expires:1});

        var chatstatustext = $('.chatstatus').text();
        $('.chatstatus').html() == chatstatustext?"close":"open";
    });

Upvotes: 0

Views: 826

Answers (3)

billyonecan
billyonecan

Reputation: 20270

Set the text in the complete function of the slideToggle(), based on whether mChatBodyFix is visible or not:

$('.chatstatus').click(function() {

    var $button = $(this);
    $('.mChatBodyFix').stop().slideToggle(500, function() {
        $button.text( $(this).is(':visible') ? 'close' : 'open' );
    });

});

Here's a fiddle

Upvotes: 0

Salman
Salman

Reputation: 3726

You probably want this:

$('.chatstatus').html( chatstatustext == "open" ? "close" : "open" )

html() sets text of an element. So you can use a condition to set it to either 'open' or 'close' here.

Upvotes: 1

Lochemage
Lochemage

Reputation: 3974

It's probably your very last statement:

$('.chatstatus').html() == chatstatustext?"close":"open";

You are testing of chatstatustext is true or false, but it is a string value. If chatstatustext contains any string other than an empty one it will always keep .chatstatus equal to "close".

Upvotes: 0

Related Questions