Show/hide sibling div based on content

user_1131026 0
Viewed 101

Hello – I would like to show content in a div based on the content in another div. For example, if sibling1 is empty, I would like to hide sibling2 (in parent1 below). If sibling1 has content, I would like to show sibling2 (parent2 below). I'd prefer to be able to do this with CSS, is this possible? If not, I can work with a simple javascript suggestion as well.

<!---hide sibling2--->
<div class="parent1">
    <div class="sibling1"></div>
    <div class="sibling2">hide</div>
</div>

<!---show sibling2--->
<div class="parent2">
    <div class="sibling1">has content</div>
    <div class="sibling2">show</div>
</div>
logic conditional-statements css
1 Answers

.parent {
  height: 100px;
  border: 1px solid;
 }
.sibling1 { background: green; }
.sibling2 { background: red; }
.sibling1:empty + .sibling2 { display: none; }
<!---hide sibling2--->
<div class="parent">
    <div class="sibling1"></div>
    <div class="sibling2">hide</div>
</div>

<!---show sibling2--->
<div class="parent">
    <div class="sibling1">has content</div>
    <div class="sibling2">show</div>
</div>

user_71730
Related