jQuery - горизонтальный аккордеон onClick

Question

Я пытаюсь написать очень простой горизонтальный аккордеон.

У меня есть три «баннерных» divs и три «области» div, поэтому, когда я нажимаю на баннер, соответствующая область должна, в идеале, анимироваться, чтобы позволить ширине перейти в авто и высоту, чтобы перейти от минимальной высоты к auto при необходимости.

код Я до сих пор работает нормально на моем сайте, но не на jfiddle, что заставляет меня верить глупую ошибку в jfiddle входе:

http://jsfiddle.net/r8tvetr7/

$(document).ready(function(){ 
    $("#second_line_accordian_banner_one").click(function(){ 
    $("#second_line_accordian_area_two").animate({width:"0px"}, "fast"); 
    $("#second_line_accordian_area_three").animate({width:"0px"}, "fast"); 
    $("#second_line_accordian_area_one").animate({width:"300px"}, "slow", swing); 
    }); 
}); 

$(document).ready(function(){ 
    $("#second_line_accordian_banner_two").click(function(){ 
    $("#second_line_accordian_area_one").animate({width:"0px"}, "fast"); 
    $("#second_line_accordian_area_three").animate({width:"0px"}, "fast"); 
    $("#second_line_accordian_area_two").animate({width:"300px"}, 2000, swing); 
    }); 
}); 

$(document).ready(function(){ 
    $("#second_line_accordian_banner_three").click(function(){ 
    $("#second_line_accordian_area_two").animate({width:"0px"}, "fast"); 
    $("#second_line_accordian_area_one").animate({width:"0px"}, "fast"); 
    $("#second_line_accordian_area_three").animate({width:"300px"}, 1000, swing); 
    }); 
}); 

Спасибо,

Answer 1

DEMO

$(document).ready(function(){ 
    $("#second_line_accordian_banner_one").click(function(){ 
    $("#second_line_accordian_area_two").animate({width:"0px"}, "fast"), 
    $("#second_line_accordian_area_three").animate({width:"0px"}, "fast"), 
    $("#second_line_accordian_area_two").css({'display':'none'}), 
    $("#second_line_accordian_area_three").css({'display':'none'}), 
    $("#second_line_accordian_area_one").css({'display':'block'}), 
    $("#second_line_accordian_area_one").animate({width:"300px"}, "slow"); 
    }), 

    $("#second_line_accordian_banner_two").click(function(){ 
    $("#second_line_accordian_area_one").animate({width:"0px"}, "fast"), 
    $("#second_line_accordian_area_three").animate({width:"0px"}, "fast"), 
    $("#second_line_accordian_area_one").css({ 'display':'none'}), 
    $("#second_line_accordian_area_three").css({'display':'none'}), 
    $("#second_line_accordian_area_two").css({'display':'block'}), 
     $("#second_line_accordian_area_two").animate({ width:"300px"},600); 
    }), 

    $("#second_line_accordian_banner_three").click(function(){ 
    $("#second_line_accordian_area_two").animate({width:"0px"}, "fast"), 
    $("#second_line_accordian_area_one").animate({width:"0px"}, "fast"), 
    $("#second_line_accordian_area_one").css({'display':'none'}), 
    $("#second_line_accordian_area_two").css({'display':'none'}), 
    $("#second_line_accordian_area_three").css({'display':'block'}), 
    $("#second_line_accordian_area_three").animate({ width:"300px"},600); 
    }); 
}); 

Answer 2

Вам необходимо активировать jQuery в левом меню JSFiddle