Why won't my conditional statement work?

Question

I have several div elements inside a section element. When one clicks on a certain link I want to hide the all divs within the section element and fadeIn only the div#one.

Once the div#one is visible, when someone clicks on a span element it should take the div#one and slideUp and grab div#two and slideDown. When div#two slides Down I have a if statement to test if it is visible or not. If it is visible the the same span element should now take div#two and slideUp and grab div#three and slideDown. The conditional statement I have written is not working. Please Help!

function hwdbussSlider() {

$('.dropdown').find('a').click(function() {
    $('.hwdbuss').hide();
    $('#services #one').fadeIn(3000);
});



$('#pagi_hwdbuss').find('span:first').click(function() {
    $('#hwdbuss').find('div').removeClass('hwd_visible');
    $('#services #one').slideUp();
    $('#services #two').addClass('hwd_visible').slideDown();
});

if($('#services #two').hasClass('hwd_visible')) {

    $('#pagi_hwdbuss').find('span:first').click(function() {
        $('hwdbuss').find('div').removeClass('hwd_visible');
        $('#services #two').slideUp();
        $('#services #three').addClass('hwd_visible').slideDown();

    });
}

};

Answer 1

The thing is that the class is added on a click event, within the event's scope, but the if statement is executed within the scope of hwdbussSlider() , so in fact, the class won't be added until a click is made.

I don't really understand what you're trying to do, so I won't suggest code, but the previous sentence should help you understand why it's NOT working.

Also, I think you're missing a # in the last $('hwdbuss').find('div') appearance.

Answer 2

After reading.. commenting.. re-reading again.. I think your problem is you are misusing the ID attribute on your elements. I suspect you have elements with the same ID, and thus you are seeing unexpected results. make them classes.

my reasoning for this assumption is you call to $('.hwdbuss') $('#hwdbuss') and $('hwdbuss')

Answer 3

Your If statement is only getting evaluated when hwdbussSlider() gets called. You need to put the if conditional in your "span:first" click callback

function hwdbussSlider() {

$('.dropdown').find('a').click(function() {
    $('.hwdbuss').hide();
    $('#services #one').fadeIn(3000);
});



$('#pagi_hwdbuss').find('span:first').click(function() {
    $('#hwdbuss').find('div').removeClass('hwd_visible');
    $('#services #one').slideUp();
    $('#services #two').addClass('hwd_visible').slideDown();


    if($('#services #two').hasClass('hwd_visible')) {

        $('#pagi_hwdbuss').find('span:first').click(function() {
            $('hwdbuss').find('div').removeClass('hwd_visible');
            $('#services #two').slideUp();
            $'#services #three').addClass('hwd_visible').slideDown();

        });
    }

});

};