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:
$(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,
您需要在JSFiddle的左侧菜单中激活jQuery。
$(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);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.