Topic: Make one onboarding finish trigger another

ilya premium asked 1 month ago


Assume i have two parallel containers with the class onboardng

div class="onboarding" id="first"
...
<button data-mdb-step data-mdb-index=1>
</div>

<div class="onboarding" id="second">

...
</div>

Is there a way that the onboarding elements in div second only appear after the onboarding elements in div first?


mlazaru staff answered 1 month ago


Hi,

Instead of adding onboarding class to both elements, try to initialize second onbording via JS after end.mdb.onboarding event is emmited:

const options = {
  steps: [
    {
      index: 1,
      onboardingContent: '1',
      target: 'step-1'
    },
    {
      index: 2,
      onboardingContent: '2',
      target: 'step-2'
    },
  ],
  startTrigger: '#onboarding-start',
  startEvent: 'click'
}

document.addEventListener('end.mdb.onboarding', () => {
    new Onboarding(document.getElementById('secondOnboarding'), options);
}, { once: true })


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 5.0.0
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: Yes
  • Provided link: No