Question

I have a “slide out” div that I’m hiding/showing via CSS positioning, and using jquery to toggle a class that sets the hidden/shown state of the div.

That’s all working great. What I’m now trying to do is have any link farther up on the page change the class to show the div, and jump down the page to it.

Here’s what I have :

$('a[href="#request-trial"]').click(function () {
  $("#request-trial").toggleClass("on off");
});         

The problem is it’s first jumping to the anchor, and then changing the class, so it’s jumping to the position of the div when it’s “off” instead of when it’s “on” – does that make sense? Does anyone have any suggestions?

---

adding some extra info:

HTML:

<section class="form-popup on" id="request-trial">
<div class="container">
<h1>Let's Talk more!</h1>
<p>Have a project in mind or have an organizational challenge you need assistance in tackling? Get in touch... we’ll discuss ways that the Beyond Nines team could help.</p>

<a class="close">Close</a>
</div>
</section>

Link is something like:

<a href="#request-trial">Sign up</a>

Css:

.form-popup,
.form-popup.on {
position: absolute;
height: 500px;
z-index: 0;
bottom: 0px;
opacity: 1;
 }

 .form-popup.off {

 bottom: -580px;
 opacity: 0;

  }

Answer 1

Here is my code

$('a[href="#request-trial"]').click(function(evt) {
  evt.preventDefault();
  var target = $("#request-trial");
  target.toggleClass("on off");
  if (target.length > 0 && target.hasClass("on"))
  {
     $("html, body").animate({
         scrollTop: target.offset().top - $(window).height()
     }, 500);
  } 
});