Show and hide form
Question
I have a row which has a form.
<div class="row display_magic" id="magic">
<h1>helloworld</h1>
</div>
and this is my style.
.display_magic {
display: none;
}
And this is my javascript that I wrote,
<script>
function showDiv() {
document.getElementById('magic').style.display = "block";
}
</script>
And this is the button that triggers the function
<button onclick="showDiv()"> Add new request</button>
So right now its hidden and when I click the button it appears, all I need to do now is make it disappear when the button is clicked again. It is a must that its hidden in the start.
9 answers
solution1
3 ACCPTED 2016-02-02 09:02:05
try this
function showDiv() { if(document.getElementById('magic').style.display == "block") document.getElementById('magic').style.display = "none"; else document.getElementById('magic').style.display = "block" }
.display_magic { display: none; }
<div class="row display_magic" id="magic"> <h1>helloworld</h1> </div> <button onclick="showDiv()"> Add new request</button>
solution2
2 2016-02-02 09:00:03
<button onclick="toggleDiv()"> Add new request</button>
<script>
var visible = false;
function toggleDiv() {
visible ? document.getElementById('magic').style.display = "none" : document.getElementById('magic').style.display = "block";
visible = !visible;
} </script>
solution3
2 2016-02-02 09:03:18
Just add a condition to your function to first check if it is displayed or not, and act accordingly. You can use ternary operator to make it in one line:
function showDiv() {
document.getElementById('magic').style.display = document.getElementById('magic').style.display == "none"?"block":"none";
}
solution4
2 2016-02-02 09:03:43
Do this:
<script>
var hasShow=false;
function showDiv(){
if(hasShow){
document.getElementById('magic').style.display = "none";
hasShow=false;
}else{
document.getElementById('magic').style.display = "block";
hasShow=true;
}
}
</script>
solution5
1 2016-02-02 09:02:25
Change your showDiv() function to:
function showDiv() {
if(document.getElementById('magic').style.display === "block"){
document.getElementById(text).style.display = 'none';}
else{document.getElementById(text).style.display = 'block';}
solution6
1 2016-02-02 09:03:46
you can rewrite the method like this
function showDiv() {
if(document.getElementById('magic').style.display=='none'){
document.getElementById('magic').style.display = "block";
}else{
document.getElementById('magic').style.display = "none";
}
}
solution7
1 2016-02-02 09:06:20
var showDiv = function () {
var magic = document.getElementById('magic');
magic.style.display === "block" ? magic.style.display = "none" : magic.style.display = "block"
}
document.getElementById('btn').addEventListener('click', showDiv, false)
solution8
0 2016-02-02 09:09:34
Your code would benefit from a "toggle" function
How it is right now:
<script>
function showDiv() {
document.getElementById('magic').style.display = "block";
}
</script>
How it would be then:
<script>
function toggleVisibility(elementId) {
var visible = "block";
var hidden = "none";
var visibility = document.getElementById(elementId).style.display;
if(visibility == visible)
display = hidden;
else
visibility = visible;
document.getElementById(elementId).style.display = visibility;
}
function showDiv() { // maybe "toggleDiv" would be a better name for this now
toggleVisibility("magic");
}
</script>
Bonus: you have a function to toggle visibilities you can reuse
solution9
0 2016-02-02 09:12:03
Please use Jquery toggle for this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#magic").toggle();
});
});
</script>
</head>
<body>
<button> Add new request</button>
<div class="row display_magic" id="magic">
<h1>helloworld</h1>
</div>
</body>
</html>
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.