html toggle divs
i have the following code :
<html>
<head><title></title>
<script>
function showMe (it, box) {
var vis = (box.checked) ? "none" : "block";
document.getElementById(it).style.display = vis;
}
</script>
</head>
<body>
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<div id="div1">
<h3 align="center"> test </h3>
</div>
<form>
</form>
</body>
I want to toggle the div, the code above works however when the script loads th开发者_高级运维e div is visible. How can i set the div to hidden when the script loads? (i know that if i set the div outside the tags it works however i want to toggle them inside).
Set the div
tag to display:none
initially. And flip the condition of the if
.
Like:
function showMe (it, box) {
var vis = (box.checked) ? "block":"none";
document.getElementById(it).style.display = vis;
}
<div id="div1" style="display:none">
I do something very similar on one of my pages and I include this in the div
style="display:none"
That seems to work for me, and then it gets changed to block when i click my show/hide button
精彩评论