Switching innerHTML on return click event
Question
I have this show more/less click event and It changes on the first click but I am not sure how to get it to return to the previous state on the return click.
<Html>
<head>
</head>
<body>
<div id="showit">Show More</div>
<div class="shown" style="display: none;">
Here is some content that I want to display
</div>
<script>
$(document).ready(function() {
var element = document.getElementById("showit");
$('#showit').click(function(){
$('.shown').slideToggle("fast");
element.innerHTML = "Show Less";
});
});
</script>
</body>
</html>
I am new to JS, can anyone help?
Thanks.
4 answers
solution1
1 ACCPTED 2015-02-02 20:16:26
Do like this:
$(document).ready(function() {
$('#showit').click(function(){
$('.shown').slideToggle("fast");
$(this).text($(this).text() == 'Show Less' ? 'Show More': 'Show Less');
});
});
solution2
0 2015-02-02 20:20:30
The simplest way would be to use a flag variable (on/off or true/false in JS):
var element = document.getElementById("showit");
var isShown = false;
$('#showit').click(function(){
$('.shown').slideToggle("fast");
isShown = !isShown; // flip the flag
element.innerHTML = isShown ? "Show Less" : "Show More";
});
Working fiddle and snippet below:
$(document).ready(function() { var element = document.getElementById("showit"); var isShown = false; $('#showit').click(function() { $('.shown').slideToggle("fast"); isShown = !isShown; // flip the flag element.innerHTML = isShown ? "Show Less" : "Show More"; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="showit">Show More</div> <div class="shown" style="display: none;">Here is some content that I want to display</div>
solution3
0 2015-02-02 20:23:15
You could do it like this:
$(document).ready(function() {
var element = document.getElementById("showit");
$('#showit').click(function(){
var $el = $('.shown'),
text = $el.is(":visible") ? 'More' : 'Less';
alert();
$el.slideToggle("fast");
element.innerHTML = "Show " + text;
});
});
This is based on whether the div is visible, you is more flexible as you can change the text easily.
solution4
0 2015-02-02 20:32:23
Solution could be simple, just add toogleFlag and deal with it:
$(document).ready(function() {
var element = document.getElementById("showit");
var elementIsVisible = true;
$('#showit').click(function(){
$('.shown').slideToggle("fast");
toggleText(element);
});
function toggleText(element){
if(elementIsVisible){
element.innerHTML = "Show Less";
elementIsVisible = false;
}else{
element.innerHTML = "Show More";
elementIsVisible = true;
}
}
});
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.