Hide next <div> if previous <div> exists

Question

What am i doing wrong?

$('function') {

$('#page #Description:has(.next('.subdescription'))').css('display', 'none');

});

where HTML is:

<div id="page">
  <div id="description"> </div>
  <div class="subdescription">Content</div>
</div>

Might be over thinking the solution?

Answer 1

1) .next is a function not a selector.

2) Your run on onload usage of $('function') is incorrect.

3) The following should work

$(function(){
    if($('#page #description + .subdescription').length > 0){
        $('#page #description').hide();
    }
});

Just going to add a bit of explanation below:

$(function(){

This is equal to $(document).ready(function(){ /* code here */ })

$('#page #description + .subdescription')

Return all elements with class 'subdescription' that are siblings to the div with id of 'description'

$('#page #description').hide();

Shorthand for $('selector').css('display', 'none')