Display item only if another item exists

Question

How can I hide a div and show it only if another div exists on the page? I assume jquery or js is the way to go ....

<style type="text/css"> .always-here { display:none; } </style> <div class="im-here">This div exists on this particular page!</div> <div class="always-here">This div is always here but has the style display: none unless a div with the class "im-here" exists.</div> 

Answer 1

For current current html you can do

 .always-here { display:none; } .im-here ~ .always-here{ display:block; } 

this will only work if .always-here and .im-here are siblings, and .im-here earlier.

http://jsfiddle.net/BKYSV/ - .im-here present
http://jsfiddle.net/BKYSV/1/ - .im-here missing

Answer 2

 $(document).ready(function(){ if($(".im-here").length > 0) { $(".always-here").show(); } }); 

here is the code Click here!

Answer 3

Try the following:

 if($(".im-here").length) $(".always-here").show(); 

Answer 4

yes you can do it with jquery using this code

 $(document).ready(function(){ if($('.im-here').length) $('.always-here').show(); }); 

view example