Question

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.

Answer 1

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