Topic: Make one onboarding finish trigger another

ilya premium asked 1 year 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 class="onboarding" id="second">


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

Mateusz Lazaru staff answered 1 year ago


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.


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



Specification of the issue

  • ForumUser: 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