Dave's Brain

Browse - Programming Tips - How can I hide web elements?

Date: 2016aug5
Platform: web

Q.  How can I hide web elements?

A.

1.  The way most people think of first is display:none

<div style="display:none">Hello</div>
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. In jQuery:
$('#id').hide(); $('#id').show();
2. Next is visibility:hidden
<div style="visibility:hidden">Hello</div>
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. In jQuery:
$('#id').css('visibility', 'hidden'); $('#id').css('visibility', 'visible');
3. Set the opacity
<div style="opacity:0">Hello</div>
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. In jQuery:
$('#id').css('opacity', '0'); $('#id').css('opacity', '1');
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.

Add a comment

Sign in to add a comment
Copyright © 2008-2017, dave - Code samples on Dave's Brain is licensed under the Creative Commons Attribution 2.5 License. However other material, including English text has all rights reserved.