There is a piece of html code

<div class="header">тут контент <div class="load-panel" style="opacity:0">тут контент</div> </div>

Wrote a code to open the block .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" }); }); });

How to solve the problem of multiple clicks on a link to open a block? If you click on an example 5 times by reference, the .header block returns to its original position, more precisely, its height is 60px, and the .load-panel block remains unclosed.

Maybe someone will help correct / improve the code for a more correct execution of the task?

  • And what does this code do? I read, read, but something is all confusing. Can it just check if the .load-panel is closed? - fremail

1 answer 1

Try this option .

 var flag = 0, header = $(".header"), loadPanel = $('.load-panel'), animParams = { 0: { opacity: 1, marginTop: 15, paddingTop: 30, paddingBottom: 30 }, 1: { opacity: 0, marginTop: 0, paddingTop: 0, paddingBottom: 0 } }; $('#load').on('click', function() { loadPanel.finish().animate(animParams[flag], 200, 'linear', function() { header.animate({ minHeight: (flag ? 60 : 400) }); flag = flag ? 0 : 1; }); });
  • An interesting decision. Thank! - webphp
  • It is only necessary to make the first .header stretch along the height, and then the .load-panel block is already opened. With the concealment, everything is in order, first the .load-panel block is hidden, and then the .header decreases - webphp