I want to have a hidden checkbox that doesn't take up any space on the screen.
If I have this:
<div id="divCheckbox" style="visibility: hidden">
I don't see the checkbox, but it still creates a new line.
If I have this:
<div id="divCheckbox" style="visibility: hidden; display:inline;">
it no longer creates a new line, but it takes up horizontal space on the screen.
Is there a way to have a hidden div that takes up no room (vertical or horizontal?
To hide the element visually, but keep it in the html, you can use:
<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
[content]
</div>
or
<div style='visibility:hidden; overflow:hidden; position:absolute;'>
[content]
</div>
What may go wrong with display:none
? It removes the element completely from the html, so some functionalities may be broken if they need to access something in the hidden element.
Use style="display: none;"
. Also, you probably don't need to have the DIV, just setting the style to display: none
on the checkbox would probably be sufficient.
Since you should focus on usability and generalities in CSS, rather than use an id to point to a specific layout element (which results in huge or multiple css files) you should probably instead use a true class in your linked .css file:
.hidden {
visibility: hidden;
display: none;
}
or for the minimalist:
.hidden {
display: none;
}
Now you can simply apply it via:
<div class="hidden"> content </div>
In addition to CMS´ answer you may want to consider putting the style in an external stylesheet and assign the style to the id, like this:
#divCheckbox {
display: none;
}
To prevent the checkbox from taking up any space without removing it from the DOM, use hidden
.
<div hidden id="divCheckbox">
To prevent the checkbox from taking up any space and also removing it from the DOM, use display: none
.
<div id="divCheckbox" style="display:none">
display: none;
_x000D_
This should make the element disappear and not take up any space.
Consider using <span>
to isolate small segments of markup to be styled without breaking up layout. This would seem to be more idiomatic than trying to force a <div>
not to display itself--if in fact the checkbox itself cannot be styled in the way you want.
Show / hide by mouse click:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if (ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>
Source: Here
Source: Stackoverflow.com