Toggle .html text on click with jQuery

Question

Im trying to build a collase expand function on my website.

I have the following that toggle ths hidden div only im trying to change the 'Expand' text to collapse, and then if clicked again, collapse > expand.

Can anybvody see what im doing wrong?

$('.coverage .expand').click(function(){
    $(this).parent().parent().find('.subitems').toggle('slow', function() {
        var togtit = $(this).parent().find('.expand');
        if((togtit).is('Expand')){
            togtit.html('Collapse')
        } else {
            togtit.html('Expand')
            }
    });
});

VisioN · Accepted Answer · 2013-01-15 11:13:27Z

1

The problem is that you use .is() method in wrong way. You may try the following instead:

$(this).parent().find(".expand").html(function(i, html) {
    return html === "Expand" ? "Collapse" : "Expand";
});

answered Jan 15, 2013 at 11:13

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Viktor S. · Accepted Answer · 2013-01-15 11:14:07Z

1

if(togtit.html() == 'Expand'){
     togtit.html('Collapse')
} else {
     togtit.html('Expand')
}

Above should work.

Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

jQuery.is should be used to check if element matches selector. It will not test inner content of an element.

answered Jan 15, 2013 at 11:14

Viktor S.

12.8k1 gold badge30 silver badges56 bronze badges

Collectives™ on Stack Overflow

Toggle .html text on click with jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related