title: If parent div has no children showing then show a certain different child div
body: <p>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. </p>
  
  <p>I have a parent div that is updated with free meeting rooms:</p>
  
  <pre><code>.Parent{
      width: 100%;
      margin-top: 4px;
      overflow: auto;
  }
  </code></pre>
  
  <p>if there is a free room it is display on the board (in the parent). This is done in JS like so:</p>
  
  <pre><code>$('#Parent').addClass("showRooms");    
  </code></pre>
  
  <p>If a room is not free by default it is hidden:</p>
  
  <pre><code>if(roomStatus == "Taken"){
      $('#Parent').addClass("hideRooms");    
  }
  </code></pre>
  
  <p>The css classes are as so:</p>
  
  <pre><code>.showRooms{
      visibility: visible;
      background-color: green;
  }
  .hideRooms{
      visibility:hidden;
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>(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) </p>
  
  <p>What can I use to achieve this?</p>