jQuery if div empty display 2nd div else first

Question

If #ccs-inline has content then I want to hide #inpage otherwise I want to show #inpage . The issue I have is that if the first div has no content but second div does then it doesn't display the content of second div.

$(document).ready(function(){
    if ($('#ccs-inline:not(:empty)')){
    $('#inpage').hide();
    } else {
        $('#inpage').show();
    }
});

Answer 1

Use .length , to confirm there is no empty div. Since the jQuery returns a jQuery object hence your if condition will always be true.

Example code:

$(document).ready(function() {
  if ($('#ccs-inline:not(:empty)').length > 0) {
    $('#inpage').hide();
  } else {
    $('#inpage').show();
  }
});