Greetings, I'm writing an accordion effect of some sorts into a new web site I am developing which utilizes load() to bring in the outside information into the div that's dropping down when I click a particular link. I've had to use livequery as well since there is javascript (using the UI Tabs Plug-in) inside the div that's getting populated by load(). I'm rather new to jQuery and I am wondering if there is a better way to write the following code. I am using a lot of Traversing methods, (i.e. next(), prev(), children(), etc..) and it just seems like I'm not doing a very good job. My code is doing what I wrote it for though and it seems to be working very well.
Another concern I have is how do I get everything to stop if I click the the "show more" ('.villa_right_more_info') link twice quickly so it rolls the div back up? It does roll the div back up now but after a second it rolls back down and shows a blank box. If someone could just give me some good pointers so I can put them into practice, that would be great :). Also, if someone wants to see my script live, shoot me an email and I will give you the link. $(document).ready(function() { $('.villa_right_more_info').livequery(function(){ $(this).click(function() { if ($(this).hasClass("selected")) { target = $(this).attr("target"); $(this).removeClass("selected"); $(target).parent().animate({'opacity' : '0'}, 500, function(){ $(target).parent().animate({'height' : "0"}, 500, function(){ $(target).parent().prev().prev().prev().css({'border-bottom' : '0'}); $(target).parent().removeClass("open"); }); }); } else { $this = $(".villa_wrapper").find(".open"); $this.animate({'opacity' : '0'}, 500, function(){ $this.animate({'height' : "0"}, 500, function(){ $this.prev().prev().prev().css({'border-bottom' : '0'}); $this.removeClass("open"); $this.prev().prev().children (".villa_right_more_info").removeClass("selected"); }); }); myLink = $(this).attr("href"); target = $(this).attr("target"); $(this).addClass("selected"); $(this).parent().prev().animate({'opacity' : '1'}, 10, function(){ $(this).css({'border-bottom' : '1px solid #617D93'}); }); $(target).css({'position' : 'relative'}); $(target).parent().addClass("open"); $(target).fadeOut(10, function(){ $(target).parent().animate({height: "258px", opacity: "1"}, 500, function(){ $(target).prev(".loading").fadeIn(500, function(){ $(target).load(myLink, function(){ $(target).children(".villa_tabs").tabs({ show: function(event, ui) { $(target).prev(".loading").fadeOut(500, function(){ var tabPanel = $("#"+ui.panel.id); $(target).fadeIn(500); $(target).parent().css({'overflow' : 'hidden'}).animate ({height : $(tabPanel).outerHeight(true) + $(target).children (".villa_photo_carousel").outerHeight(true) + 28}, function(){ }); }); }, fx: {'opacity' : 'toggle'} }); }); }); }); }); } return false; }); }); });