Correct usage of jQuery toggle method

Question

$('#btn2').toggle(
    function () {
        $('#btn2').text('show');
    },
    function () {
        $('#btn2').text('hide');                
    }
)

This does not work on my computer (on any browser). Could this be due to a change in the method between jQuery versions?

If you want to check if something is (still) supported, you check the documentation. It has very good detail about appropriate usage, as well as the version in which features were added/removed. That should always be your first stop, and always do that before asking a question SO. — nbrooks
– nbrooks, Commented Feb 14, 2013 at 6:38

Anujith · Accepted Answer · 2013-02-14 06:50:31Z

1

See fiddle

This functionality of .toggle was removed in jQuery 1.9

So this wont work for jQuery 1.9 or later..

See one alternative here

edited Feb 14, 2013 at 6:50

answered Feb 14, 2013 at 6:45

Anujith

9,3686 gold badges36 silver badges48 bronze badges

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

Comments

nbrooks · Accepted Answer · 2013-02-14 06:45:55Z

1

Per your updated feature request, to simply alternate between two inner text values:

$('#btn2').click(function() {
    $(this).text( $(this).text()=='show'? 'hide':'show' );
});

That is not one of the signatures of toggle. To use its hide/show capabilities, do this $(elem).toggle() (and obviously if the button is hidden it can't say 'show', so presumably you're toggling something else):

$(elem).toggle();
$('#btn2').text( $(elem).is(':visible') ? 'hide' : 'show' );

edited Feb 14, 2013 at 6:45

answered Feb 14, 2013 at 6:33

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

2 Comments

user2049259 Over a year ago

sorry but I just want the text (value) on the button change from 'show' to 'hide', 'hide' to 'show'…. once it is clicked. again and again

nbrooks Over a year ago

@user2049259 Note: if you use <button></button>, use text, but if you use <input type='button' /> use val. Working demo: jsfiddle.net/TxXVB

Jai · Accepted Answer · 2013-02-14 06:47:05Z

1

Try this: http://jsfiddle.net/W9JCR/

$('#btn2').click(function () {
   ($(this).text()=='show') ? $(this).text('hide') : $(this).text('show');
});

answered Feb 14, 2013 at 6:47

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

alijsh · Accepted Answer · 2013-02-14 06:33:07Z

0

Yes, it's still supported. I think the problem with your code is that you've used text(). Use val()

$('#btn2').toggle(function () {
    $('#btn2').val('show');
    },function () {
        $('#btn2').val('hide');                
});

answered Feb 14, 2013 at 6:33

alijsh

8917 silver badges7 bronze badges

Collectives™ on Stack Overflow

Correct usage of jQuery toggle method

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related