how to toggle any text with JQuery?
Question
My question is very short:
If I click "show", I want to change this to "hide". Similarly, if I click "hide", I want to change this to "show"?
Such as toggleClass.
4 answers
solution1
3 ACCPTED 2012-01-21 12:13:41
Initial answer
Using the jQuery function toggle() DOCs :
$('a.toggle').click(function(){
$('div').toggle();
});
Update due to comment
HTML
<a href="#" class="cycle">Cycle</a>
<div>Text1</div>
JavaScript
var div = $('div');
var options = [div.html(), 'text2'];
var curr_opt = 1;
$('a.cycle').click(function(){
div.text(options[curr_opt]);
curr_opt++;
if(!options[curr_opt]) {
curr_opt = 0;
}
});
Description
The above code will allow you to toggle some text, but you can add extra options to the options array to create a cycle if you like.
Running code
Here is a jsfiddle that you can run for the code: http://jsfiddle.net/c3ctT/
solution2
0 2012-01-21 12:14:29
EDIT fixed the code.
jQuery
$('#toggle').html($('#toggle').html() == 'show' ? 'hide' : 'show');
HTML
<span id="toggle">show</span>
solution3
0 2012-01-21 12:24:00
Joseph, Please, Check this is what you wanted.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#showHide").html("SHOW");
$("#showHide").click(function(){
$("#content").toggle();
if($("#content").is(":hidden"))
$("#showHide").html("SHOW");
else
$("#showHide").html("HIDE");
});
});
</script>
</head>
<body>
<div id="showHide"></div>
<div id="content">
content content..content content..content content..content content.. content content..content content..content content..content content..
</div>
</body>
</html>
Only code required for SHOW/HIDE toggle.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#showHide").click(function(){
if($(this).html()=="SHOW")
$(this).html("HIDE");
else $(this).html("SHOW");
});
});
</script>
</head>
<body>
<div id="showHide">SHOW</div>
</body>
</html>
solution4
0 2012-01-21 12:40:52
elem.addEventListener("click", function toggle() {
this.classList.toggle("hidden");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.