How to change text on click using jQuery

Using the click() method and text() method change the text or replace the text of button or a link.

When Hiding or Showing Div using onclick, on the same time and same click you can change the text of button or link depend on action? Using toggle method replace or change the text on same click. Change the text of a link when its clicked or change the text of a button when we click on the button.

Toggle text on click using Button.

HTML
<button>Show Div</button>

JavaScript
$(document).ready(function(){
    $("button").click(function(){
        $(this).text($(this).text() == 'Show Div' ? 'Hide Dive' : 'Show Div');
    });
});

Toggle text on click using Link.

HTML
<a href="#" class="view-btn">Show Div</a>

JavaScript
$(document).ready(function(){
    $(".view-btn").click(function(){
        $(this).text($(this).text() == 'Show Div' ? 'Hide Div' : 'Show Div');
    });
});

Toggle text with fadeIn/fadeOut effect

HTML
<div id="change-text">
    <p id="toggle-text">Show Div</p>
</div>

JavaScript
$(document).ready(function () {
    $("#change-text").click(function () {
        $("#toggle-text").fadeOut(function () {
            $("#toggle-text").text(($("#toggle-text").text() == 'Show Div') ? 'Hide Div' : 'Show Div').fadeIn();
        })
    })
});

Change the text on click using button or link.

How to change text on click using jQuery. You can customize this code further as per your requirement.

---

Learn HTML/CSS from W3 School Website

• JavaScript