In this tutorial we will see how to Toggle Button Text with jQuery. jQuery text() method and ternary operation or simple if else statement can be used for this purpose.
Table of Contents
HTML Code
HTML code is given below, in this code we have a button tag with text 'New'.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Toggle Button Text with jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<button>New</button>
</body>
</html>
JQuery Code
JQuery Code is given below, in this code jQuery click() method is used to bind the click event with the button tag, when button is clicked a jQuery function will be executed.
Inside this function ternary operation is used with jQuery text() method to check the text of button tag. If button text is 'New' then it is changed to 'Old', otherwise if it's not 'New', then it is changed to 'New'.
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).text($(this).text() == 'New' ? 'Old' : 'New');
});
});
</script>
This can also be done using simple if else statement.
<script>
$(document).ready(function(){
$("button").click(function(){
var text = $(this).text();
if(text == 'New')
{
$(this).text('Old');
}
else
{
$(this).text('New');
}
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on how to Toggle Button Text with jQuery.