Hi

I'm new to javascript/jQuery this really has me stumped.

What I'm trying to achieve here is

• On toggling a#sameDayTab jquery will look for .changeAlert and fadeOut it's container div, when toggled again the div will fade in (this works well.)
• Each toggle will also call a function that tells me how many .changeAlert's are present on the page and updates the number appropriately in a span. The problem is when I first click the toggled anchor the number of visible should be 0 as the .changeAlert has been hidden by fadeOut instead it returns the number of classes present on page load this value never changes no matter how many times the toggle is activated.

Any help greatly appreciated.

function totalNumFares ()
    {
    var n = $('.changeAlert:visible').size();               
    $('.numFares').replaceWith('<span class=\"numFares\">'+ n +'</span>');

    }

totalNumFares();    

//Toggle On/off Same Day Connections

$('a#sameDayTab').toggle(function() {

    $('.changeAlert').parent().parent().parent().parent().parent().fadeOut();
    totalNumFares();        


    },function(){
    $('.changeAlert').parent().parent().parent().parent().parent().fadeIn();
    totalNumFares();


});