How to toggle text inside and element on click using jQuery


Use the jQuery text() method

You can use the jQuery click() method in combination with the text() method to replace or toggle the text inside an element such as a link (i.e. an anchor <a>), <div> or <button> element dynamically using the jQuery. Let's try out an example to see how this works:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>jQuery Toggle Text inside Elements</title>
    button {
        padding: 5px 10px;
        font-size: 14px;
<script src=""></script>
            $(this).text($(this).text() == 'Order by Alphabet' ? 'Order by Category' : 'Order by Alphabet');
    <button type="button">Order by Alphabet</button>
<p><strong>Note:</strong> Click on the button to swap the text.</p>