0
votes

I have a working jquery accordion on my site that pops up above the site content and pushes the content down, revealing a contact form. The trigger is a menu item inside the topbar. I want my topbar to be sticky so now i need the page to scroll to the top before the accordion opens. Currently when the button is clicked, it scrolls to the top and opens the accordion simultaneously, so the form is hidden and you'd have to scroll up manually to see the form after scrollTop is performed. How can I prevent the accordion from opening until scrollTop has been performed while also making sure that if the page is already near or at the top there is no delay in the accordion opening (so setTimeout wouldn't be useful). Here is my code so far:

function initContactAccn() {
$("#toggle-o").on("click", function(event) {
    $("[data-accordion] [data-control]").click();
});

};
initContactAccn();

function jqueryAccordion() {
$('#contact-accordion').accordion({
    "transitionSpeed": 500,
    collapsible: true,
    heightStyle: "content",
    beforeActivate: function(event, ui) {
        $("html, body").animate({ scrollTop: 0 - 422 }, "fast");
        return false;
    }
});
};
jqueryAccordion();

I hope this makes sense. Thanks so much for any insight. Btw, 422 is the height of the accordion.

1

1 Answers

0
votes

Do your animation first, then call the accordion when your animation completes:

function initContactAccn() {
  $("#toggle-o").on("click", function(event) {
    $("[data-accordion] [data-control]").click();
  });

};
initContactAccn();

function jqueryAccordion() {
  $("html, body").animate({ scrollTop: 0 - 422 }, "fast", function() {
    $('#contact-accordion').accordion({
      "transitionSpeed": 500,
      collapsible: true,
      heightStyle: "content"
    });
  });
};
jqueryAccordion();

$.animate accepts an optional third parameter that's a callback function to execute once the animation finishes.