LaravelCode

Search

How to toggle text inside and element on click using jQuery

jQuery
3590 views 4 years ago
post-title

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">
<head>
<meta charset="utf-8">
<title>jQuery Toggle Text inside Elements</title>
<style>
    button {
        padding: 5px 10px;
        font-size: 14px;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $(this).text($(this).text() == 'Order by Alphabet' ? 'Order by Category' : 'Order by Alphabet');
        });
    });
</script>
</head>
<body>
    <button type="button">Order by Alphabet</button>
<p><strong>Note:</strong> Click on the button to swap the text.</p>
</body>
</html>

 

Random Articles
  • How to use Basic Authorization in PHP curl
    When accessing API request over PHP curl, some routes are authentication required. Also third party API mostly required to authenticate before accepting request. This can be done by Bearer or Basic au...
  • How to Capture Browser Window Resize Event in JavaScript
    Use the&nbsp;addEventListener()&nbsp;Method You can simply use the&nbsp;addEventListener()&nbsp;method to register an event handler to listen for the browser window&nbsp;resize&nbsp;event, such as&...
  • JavaScript vs jQuery Differences
    When new developer starts learning in Web development, the first thing they want to know is which is best to learn for web development between Javascript and jQuery. With more and more learning, they...
  • How to Create Directory if not exists in Laravel
    In this Article, we will guide you how to create folder in storage in laravel 8 application. we are able to without difficulty create directory if now not exists the use of File or Storage facade in l...
  • How to Change Column Name and Type in Laravel Migration
    In the working with MySQL database, sometimes you need to column type. You feel that the column you have created as enum should be integer or you want to add more option in enum. In that cases changin...
Advertise