CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Phil3992
Phil3992

Reputation: 1055

If parent div has no children showing then show a certain different child div

I am seeing simlar questions about hiding parent divs if there is no child but can't find how to show a different div in the parent if no other child is in it.

I have a parent div that is updated with free meeting rooms:

.Parent{
    width: 100%;
    margin-top: 4px;
    overflow: auto;
}

if there is a free room it is display on the board (in the parent). This is done in JS like so:

$('#Parent').addClass("showRooms");

If a room is not free by default it is hidden:

if(roomStatus == "Taken"){
    $('#Parent').addClass("hideRooms");    
}

The css classes are as so:

.showRooms{
    visibility: visible;
    background-color: green;
}
.hideRooms{
    visibility:hidden;
}

When all the rooms are hidden there is a blank board, I would like to show a different child div in the parent so I can show something more interesting e.g. the company logo.

(I am aware I could have the compnay logo on the parent even if there are rooms showing but I only want it to show if there are no rooms free)

What can I use to achieve this?

Upvotes: 0

Views: 421

Answers (6)

roberrrt-s
roberrrt-s

Reputation: 8210

Yes!

I've came up with a pure CSS solution, because combining selectors is awesome:

Consider the following setup:

.container {
  margin: 10px;
  border: 1px solid #000;
}

.room {
  width: 100px;
  height: 75px;
  background-color: #F00;
}

.hidden {
  display: none;
}

.placeholder {
  display: block;
}

.room:not(.hidden) ~ .placeholder {
  display: none;
}
<div class="container">
  <div class="room hidden"></div>
  <div class="room hidden"></div>
  <div class="room hidden"></div>
  <div class="room hidden"></div>
  <div class="placeholder">No rooms available!</div>
</div>
		
<div class="container">
  <div class="room hidden"></div>
  <div class="room"></div>
  <div class="room"></div>
  <div class="room hidden"></div>
  <div class="placeholder">No rooms available!</div>
</div>

Now the magic lies in the following lines:

.room:not(.hidden) ~ .placeholder {
    display: none;
}

Explanation:

Take a placeholder, who is a sibling of a .room that does not contain the .hidden class. The placeholder is visible by default, but if it can find a sibling that has a .room without .hidden, it will fall back into display none.

Take note, this requires the placeholder div to always be the last child of it's parent. Since the ~ selector only checks for next siblings, not previous.

Upvotes: 1

Mihailo23
Mihailo23

Reputation: 1

You can have a logo wrapped in some div (or anything else, or you can add a class to the logo image, really anything), which will have a 'hidden' class by default which will hide it and then you can also show this whet you have no rooms, something like:

if(roomStatus == "Taken") {
    $('#Parent').addClass("hideRooms");
    $('.logo').addclass("visible");
    $('.logo').removeClass("hidden");
} else {
    $('#Parent').addClass("showRooms");
    $('.logo').removeClass("visible");
    $('.logo').addClass("hidden");
}

```

Upvotes: 0

Osama
Osama

Reputation: 3040

When the parent is free you have to use append to add anything you want to the parent 

if(roomStatus == "Taken"){
$('#Parent').addClass("hideRooms");    
$("#Parent").append("<span>somthing to show</span>");
}

Upvotes: 0

Shoaib Konnur
Shoaib Konnur

Reputation: 459

Just Keep the Logo div with class 'companyLogo' inside parent and use the following CSS and will work.

.hideRooms .companyLogo{
visibility:visible;
}
.showRooms .companyLogo{
visibility:hidden;
}

For more specific answer please provide HTML structure.

Upvotes: 0

sol
sol

Reputation: 22919

You could hide the logo by default, and change the display using js if the rooms are hidden. Example:

$(function() {

  var roomStatus = "Taken";

  if (roomStatus == "Taken") {
    $('#Parent').addClass("hideRooms");
    $('.logo').addClass('show');
  } 
})
.Parent {
  width: 100%;
  margin-top: 4px;
  overflow: auto;
}

.showRooms {
  visibility: visible;
  background-color: green;
}

.hideRooms {
  visibility: hidden;
}

.logo {
  display: none;
  width: 200px;
  height: 200px;
  background: red;
}

.logo.show {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Parent">
  <div class="logo">
    
  </div>
</div>

Upvotes: 0

soywod
soywod

Reputation: 4510

I would go something like :

if(allRoomStatusAreTaken()){
  $('#Parent').addClass("showLogo");
} else {
  $('#Parent').removeClass("showLogo");
}

And

.showLogo{
  visibility: visible;
  background-image: url(...);
}

In allRoomStatusAreTaken() you have to check if all rooms are taken. I would use a function like every from Lodash :

function allRoomStatusAreTaken() {
  return every(allRooms, room => room.status === "Taken");
}

Upvotes: 0

Related Questions