jQuery fade in fade out div on click with more than 2 divs

Question

I'm trying to create a jQuery fade in/out banner for a website that has 3 different links on it. I have successfully used the following answer Simple fade in fade out div with jquery on click to get 2 of the links to work but I'm having trouble with the third.
Here is the jQuery code:

$('#btn2').click(function (e) {
    $('#home_splash1').fadeOut('slow', function () {
        $('#home_splash2').fadeIn('slow');
    });
});

$('#btn1').click(function (e) {
    $('#home_splash2').fadeOut('slow', function () {
        $('#home_splash1').fadeIn('slow');
    });
});

$('#btn3').click(function (e) {
    $('#home_splash1').fadeOut('slow', function () {
        $('#home_splash3').fadeIn('slow');
    });
});

The HTML/CSS code is pretty lengthy, so I'll post the link to jsfiddle, which has all the code http://jsfiddle.net/u2NGy/
Any help would be greatly appreciated!

I wanted the links to fade out the active div and fade in each link's corresponding div. It was working well between #btn1 & #btn2, but #btn3 only worked from #btn1 and then it would stop working. I solved it by removing the duplicate id's per Sneaky's suggestion. Also, I used kamilkp's fix as well. Thanks guys!Here is the updated working code: http://jsfiddle.net/arZMC/ — imcadams, Feb 25 '14 at 22:07

kamilkp · Answer 1 · 2014-02-25T06:23:25.013

You need to write

$('#btn2').click(function(e){    
    $('#home_splash1, #home_splash3').fadeOut('slow', function(){
        $('#home_splash2').fadeIn('slow');
    });
});

instead of

$('#btn2').click(function(e){    
    $('#home_splash1', '#home_splash3').fadeOut('slow', function(){
        $('#home_splash2').fadeIn('slow');
    });
});

Also you had two anchors with id="btn3". I updated your fiddle, it now works: http://jsfiddle.net/vD77F/31/

score 0 · Accepted Answer · answered Feb 25 '14 at 06:15

You have duplicate id's on your page, which is not valid HTML:

<a href="#" class="white" id="btn3">Trusted Quality</a>

I'm guessing jQuery either fails to run, or just runs on the first element it finds that matches the id. Try changing the id's so that they are unique and it should get you closer.

jQuery fade in fade out div on click with more than 2 divs

2 Answers2