Question

I’m trying to display one of two headings depending on whether some DOM elements are available / visible on the page. For some reason, it’s not working… Here’s the live demo so far.

I’ve got the following code:

$('h3.list_heading').css('display', 'none');
$('h3#error').css('display', 'none');
    if ( $('div.availableNowListing').filter(':visible').length == 0) {
        $('h3#error').css('display', 'block');
    } else {
        $('h3.list_heading').css('display', 'block');
    }

At the moment, no matter what I select I only ever get one heading displayed…

EDIT
Just to explain what should happen:
When clicking on the store to sort by, it should only display entries that’s associated with that store. If there’s no fruit associated with that store, the heading:

Our Suggestion of the Best Available in xxxxx this Week

should change to

Bad Luck! It seems we could’t find any good fruit at xxxxx store this week

EDIT 2
Tried using the following code, but nomatter which store I select to sort by, I just get the error message even if the div’s I’m looking for are present…

$('h3.list_heading').hide();
$('h3#error').hide();
if ( $('div.availableNowListing:visible').length) {
    $('h3#error').show();
} else {
    $('h3.list_heading').show();
}

Answer 1

Try changing these lines in your switch

$('div.availableNowListing').not(':first').find('div.available_now_entry').fadeOut('fast');
check_heading();

to this instead, shifting the function call as a callback for fadeOut().

$('div.availableNowListing').not(':first').find('div.available_now_entry').fadeOut('fast',  check_heading);