It's fairly easy to confuse the Cascading Style Sheets (CSS) properties display and visibility, because it would seem that they do much the same thing. However, the two properties are in fact quite different. The visibility property determines whether a given element is visible or not (visibility="visible|hidden"). However, when visibility is set to hidden, the element being hidden still occupies its same place in the layout of the page.
<script language="JavaScript">
function toggleVisibility(me){
if (me.style.visibility=="hidden"){
me.style.visibility="visible";
}
else {
me.style.visibility="hidden";
}
}
</script>
<div onclick="toggleVisibility(this)" style="position:relative">
This example displays text that toggles between a visibility of 'visible' and 'hidden'.
Note the behavior of the next line.</div><div>This second line shouldn't
move, since visibility retains its position in the flow</div>
This example displays text that toggles between a visibility of 'visible' and 'hidden'.
Note the behavior of the next line.
This second line shouldn't move, since visibility retains its position in the flow
It's quick, easy and you get access to all the articles on DevX.
This registration/login is to allow you to read articles on devx.com. Already a member?
To become a member of DevX.com create your Member Profile by completing the form below. Membership is free!
If you have a hot tip and we publish it, we'll pay you. However, due to accounting overhead we no longer pay $10 for a single tip submission. You must accumulate 10 acceptable tips to receive payment. Be sure to include a clear explanation of what the technique does and why it's useful. If it includes code, limit it to 20 lines if possible. Submit your tip here.
