Browse - Programming Tips - How can I hide web elements?
Q. How can I hide web elements?
1. The way most people think of first is display:none
The element is not shown to the user and it doesn't take up any space.
It won't be read by a screenreader (eg Windows Narrator) either.
Use display:block to show.
2. Next is visibility:hidden
This is the same as display:none but the space is kept.
If you want to reveal something without causing the page to be re-flowed, this is for you. Use visibility:visible to show.
3. Set the opacity
Not seen by the user (hidden), does take up space, will be read by Narrator.
Pretty clean and simple. Didn't use to work everywhere but now does.
Set opacity:1 to show.
4. Position it off the page.
<div style="position:absolute; left:-999px; top:0px">Hello</div>
The negative left position makes the element go way off the side of the page and it won't be seen.
So it doesn't take up screen space. But will be read by a screenreader (eg Windows Narrator).
This will require a comment since its kludgey.