• Seo Expert
  • Khaali Paper

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 jQuery
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