Hide and show functionality not working
Question
I am doing and show functionality I'm tried scenarios but it is not working, Please let me know what i did mistake.
My code :
function showButtons() { $("#view").click(function(){ $("#allversion").show(); }); $("#view").click(function(){ $("#allversion").hide(); }); } <div id="allversion" style="display:none"> SOME DISPLY CODE HERE </div>
let me know the changes i need to made
<a onclick="showButtons()" id="view">View More</a>
7 answers
solution1
1 ACCPTED 2017-01-26 07:26:32
Problem is that every time you call function showButtons that binds additional 2 click events every time (so clicking on link 2 times you will have 4 events in total). And your code shows and hides element at the same time.
You need to toggle it:
$(document).ready(function() { $('#view').click(function() { $('#allversion').slideToggle(); }); });
#allversion { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="view">View More</a> <div id="allversion">VISIBLE!</div>
solution2
0 2017-01-26 07:24:24
This works with me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function showButtons() {
$("#allversion").toggle();
}
</script>
</head>
<body>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a onclick="showButtons()" id="view">View More</a>
</body>
</html>
solution3
0 2017-01-26 07:24:33
I recommend you to use toggle method. The problem is that you have to use one single click event handler.
$("#view").click(function(e){ $("#allversion").toggle(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="allversion" > SOME DISPLY CODE HERE </div> <a id="view">View More</a>
solution4
0 2017-01-26 07:29:33
change to the following code, it should work.
<a id="view">View More</a>
var isClicked = false;
$( "#view" ).click(function() {
if (isClicked == true) {
$("#allversion").css("display", "none");
isClicked = false;
}
else {
$("#allversion").css("display", "inline");
isClicked = true;
}
});
Also you can use .toggle() to switch the visibility.
<a id="view">View More</a>
$( "#view" ).click(function() {
$("#allversion").toggle();
});
solution5
0 2017-01-26 07:30:27
You don't need to call onclick="showButtons()" event for that. You can easily hide and show your section something like this:
$(document).ready(function(){
$("#view").click(function(){
$("#allversion").toggle();
});
});
solution6
0 2017-01-26 07:33:48
You can use toggle as suggested by others or you can try this
$("#view").click(function(){
if($("#allversion").hasClass('show'))
{
$("#allversion").removeClass('show').addClass('hide');
}
else
{
$("#allversion").removeClass('hide').addClass('show');
}
solution7
0 2017-01-26 08:09:33
As per your question "Why isn't my code working?".
If your code is exactly as is here as on your site, it's not working because the script is initializing before the DOM is loaded.
Move your script to the bottom of the page or put it in to a
$(document).ready(function(){
//Code goes here
});
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.