Question

I am trying to write a small jquery code, but I just stuck at one point.

Here is my sample code – http://jsfiddle.net/KfA4k/3/ .

As you can see, there is 2 buttons and each targets targets a specific hidden “alert” and there is 1 button to activate the specific “alert”.

When you press on each of alerts button it just adds a specific class to the “run” button, so I could see which alert user wants. If I check the button with FireBug, I see that classes is changing right, but jQuery only gets only the hard coded in class.

If you dont understand the problem, please check my jsfiddle sample code , it will be easier to understand.

Answer 1

You should only really wire up one event to the #run button.

Just use an if statement to see which social is active and toggle the specific hidden one.

$('#social1').on('click', function() {
    $('a').removeClass('active');
    $(this).addClass("active");
});

$('#social2').on('click', function() {
    $('a').removeClass('active');
    $(this).addClass("active");
});

$('#run').on('click', function() {
    if ($("#social2").hasClass("active")) $('#hidden-social-2').animate({
        height: 'toggle'
    });
    else $('#hidden-social-1').animate({
        width: 'toggle'
    });
});

http://jsfiddle.net/KfA4k/5/