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