How to hide a div whenever another div is displayed on the screen.

Like this :

if($('#yourElement').is(':visible')) { $('#yourOtherElement').hide(); } 

If you want to show it instead, you can use show(), like this :

$('#yourOtherElement').show(); 

However, if this is something that is determined on page load, it would be smarter to define this using your server-side language.

It seems that you have only one help section on your page.

Imperative approach: So you could solve this problem by using getElementById to retreive your help section element. If you don't get an element returned it's not appended to the dom, otherwise check the display attribute.

Event based approach (check browser restrictions): If you just remove and append the help section to the dom on demand you could bind dom insertion and removal to trigger the visibility of the other element. Here is a related post where the event binding is discussed Is there a jquery event that fires when a new node is inserted into the dom?

Depending on your HTML markup, you could possibly do it with CSS only.

CSS

#searchResults + #helpSection { display: none; } 

HTML

<div id="searchResults">Search search search</div> <div id="helpSection">Help help help</div> 

On jsfiddle

See what happens when you remove:

<div id="searchResults">Search search search</div>