CODEWITHSUNDEEP
javascriptjquery
Othman
Othman

Reputation: 3018

toggle the title of a button

I have an HTML button and it shows another div instead of another div.

All I need is to toggle the text for the button: 

<input id="blueButton" type="button" value="+ Add a new Team" onclick="
 $('#blueButton').prop('value', 'Hide'); 
 $('#teams').toggle('slow');
 $('#add_block').toggle('slow');">

I need to change the button text again from hide to the orgianl title which is + Add a new Team

so the button title is + Add a new Team if clicked the button title change to hide if I click the button again it will change to + Add a new Team again.

Thank you in advance.

Upvotes: 2

Views: 995

Answers (5)

Ram
Ram

Reputation: 144659

$('#blueButton').val(function(_, value) {
    return value === 'hide' ? '+ Add a new Team' : 'hide' 
});

Upvotes: 2

Clyde Lobo
Clyde Lobo

Reputation: 9174

$("#blueButton").toggle(
    function(){
        $(this).val("hide");
    }, 
    function(){
        $(this).val("+ Add a new Team");
    }
);

Working DEMO

Upvotes: 2

zenkaty
zenkaty

Reputation: 1548

Try this:

$('#blueButton').click(function() {
    if ($(this).val() == "+ Add a new Team") { 
        $(this).val("Hide")
    } else { 
        $(this).val("+ Add a new Team")
    }
});

EDIT: undefined said the same thing as me, but better, use his :P

Upvotes: 1

Bongs
Bongs

Reputation: 5592

Here is jsfiddle

jQ

$("#blueButton").live("click", function() {
    $(this).val() == "+ Add a new Team" ? $(this).val("hide") : $(this).val("+ Add a new Team");
});​

Upvotes: 0

sushil bharwani
sushil bharwani

Reputation: 30177

$('#teams').toggle('slow', function() {
    // Animation complete.
    //Change button Text here
    $('#blueButton').prop('value', 'show');
  });

This may not be the exact code you require but it can give you a hint that you can have a callback function which can be used to do things after toggle has finished,

Upvotes: 0

Related Questions