Topic: Make one onboarding finish trigger another
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?
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 })
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 5.0.0
- Device: any
- Browser: any
- OS: any
- Provided sample code: No
- Provided link: No