I'm attempting to create a simple horizontal accordion-style element.
My setup includes three 'banner' divs and three 'area' divs. Ideally, when I click on a banner, the corresponding area should animate - expanding in width to auto and adjusting the height from min-height to auto if necessary.
While my code works fine on my website, it's not functioning properly on jsfiddle. I suspect there may be a small mistake in how I entered the code on jsfiddle:
$(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);
});
});
Appreciate any help,