Есть кусок html кода
<div class="header">тут контент
<div class="load-panel" style="opacity:0">тут контент</div>
</div>
Написал код для раскрытия блока .load-panel
$("#load").on("click", function() {
var id = $(this).data("id")
, check = $(".header").attr("id");
if(check) {
$(".load-panel").animate({
opacity: 0,
"margin-top": 0,
paddingTop: 0,
paddingBottom: 0,
}, 200, "linear", function() {
$(".header").animate({
"min-height": 60
}).attr("id", "");
});
return false;
}
$(".header").animate({
"min-height": 400
}, 200, "linear", function() {
$( this ).attr("id","open");
$(".load-panel").css({
"border-top": '1px solid'
}).animate({
opacity: 1,
"margin-top": 15,
paddingTop: 30,
paddingBottom: 30,
borderColor: "#c0c0c0"
});
});
});
Как решить проблему множественных кликов по ссылке раскрыть блок? В случае если кликнуть к примеру 5 раз по ссылке, блок .header возвращается в свое исходное положение, точнее высота его 60px, а блок .load-panel остается незакрытым.
Может быть кто то поможет поправить/усовершенствовать код для более правильного исполнения задачи?