In my intro tour, I have a section where I need to expand a div with a slider before I can run intro on the internal elements. I use onbeforechange to expand the div, but it is a jquery animation. The problem is that the top coordinate of the div is off screen when I get to this step of my tour. I want to wait until the animation is complete before drawing the next introjs box. Is there a way to do this? Here is my code…
}).onbeforechange(function(targetElement) {
// Check if you want to trigger a click on the current step
if (this._currentStep === 3 || this._currentStep === 4 ||this._currentStep === 5 ||this._currentStep === 6 ||this._currentStep === 7) {
if ($('.btn-arrow').text() == 'Click for ↓ Details') {
const elementToClick = document.querySelector(".btn-arrow");
if (elementToClick) {
elementToClick.click();
}
}
}
The conditional is a test for whether the div is expanded yet. It is saying “if not, then expand before change.” but introjs does not wait for the expand to complete since it is asynchronous. I guess what I need is a ‘pause’ introjs, then a ‘restart’ that I can trigger on complete of my animation?
Thanks for any hints.