I've revised my code and added some features as well to catch some errors. I'm still having problems with clicking on the link twice quickly and it rolling back down an empty box. I think the problem is with the load() function, it doesn't stop and when it finishes it rolls the div back down again. So I'm guessing if I find a way to cancel the load() function, this will fix my problem.
$(document).ready(function() {
$('.tabs').livequery(function(){
var $this = $(this);
var $target = $($this.attr("target"));
$this.click(function() {
if ($this.siblings().hasClass("selected"))
{
$this.siblings().removeClass("selected");
$this.addClass("selected");
$target.children(".villa_tabs").tabs('option',
'selected',
$this.attr("rel") == "inquire" ? 1 : 0);
} else {
if ($this.hasClass("selected"))
{
$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 {
var $open_wrapper =
$(".villa_wrapper").find(".open");
$open_wrapper.animate({'opacity' :
'0'}, 500, function(){
$open_wrapper.animate({'height'
: "0"}, 500, function(){
$open_wrapper.prev().prev().prev().css({'border-bottom' :
'0'});
$open_wrapper.removeClass("open");
$open_wrapper.prev().prev().children
(".villa_right_more_info").removeClass("selected");
$open_wrapper.prev().prev().children
(".villa_right_more_info").siblings().removeClass("selected");
});
});
var myLink = $this.attr("href");
$this.addClass("selected");
$this.parent().prev().animate({'opacity' : '1'}, 10, function(){
$this.parent().prev().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'},
selected: $this.attr("rel") == "inquire" ? 1 : 0
});
});
});
});
});
}
}
return false;
});
});
});
