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. There is NO display:show (WRONG!) Set with jQuery

$('#id').hide(); $('#id').show();

Check with jQuery

if ($('#id').is(':visible')) { // display:none isn't there } if ($('#id').is(':hidden')) { // display:none IS there }

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.