jQuery-水平手风琴onClick

Question

I am trying to write a very simple horizontal accordion sort of thing.

I have three 'banner' divs and three 'area' divs so when I click the banner, the corresponding area should, ideally, animate to allow the width to go to auto and the height to go from min-height to auto if required.

The code I have so far is working fine on my site but not on jfiddle, which makes me believe a silly mistake in the jfiddle entering:

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);
  });
});

Thanks,

Answer 1

您需要在JSFiddle的左侧菜单中激活jQuery。

Answer 2

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);
  });
});