Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display element only if another element exists

How would I go about hiding a div and only displaying it if another div existed on a page? I'm guessing jquery or js would be 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>
like image 917
Heather Avatar asked Aug 27 '13 23:08

Heather


1 Answers

For your 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 comes before.

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

like image 156
Musa Avatar answered Sep 21 '22 01:09

Musa