5
How to toggle text inside and element on click using jQuery
source link: https://www.laravelcode.com/post/how-to-toggle-text-inside-and-element-on-click-using-jquery
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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">
<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>
Author : Harsukh Makwana
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK