Im using intojs, the step 1 and 2 are okay then when to travel to step 3 from step 2, I faced a problem to travel to step 3. For the normal behavior, we have to click first then step 3 part will be shown. Actually, step 3 is the 3 dot button, when we click that 3 dot button, it will show some functions like log out and my profile.
This the class that makes the part is shown "dropdown profile_menu open"
and this is the code if it does not show "dropdown profile_menu"
This is my js code:
<script type="text/javascript">
$(document).ready(function () {
var intro = introJs();
intro.setOptions({
steps: [
{
element: '#divSideBar',
intro: '<strong>Fixing Sidebar</strong> <br/> This is the side bar of the system',
},
{
element: '#divTopBar',
intro: '<strong>Shortcut</strong> <br/>1. Dashboard<br/>2. Profile Search<br/>3. Inbox<br/>4. Org Chart<br/>5. Report',
onbeforechange: function () {
console.log('Opening dropdown menu');
$('#liUserNav').click();
setTimeout(function () {
intro.nextStep();
}, 1000); // wait for 1 second for the dropdown menu to appear
},
onshow: function () {
$('.dropdown.profile_menu').addClass('open');
}
},
{
element: '#divProfile',
intro: '<strong>Profile</strong> <br/>Your Profile',
onshow: function () {
$('.dropdown.profile_menu').addClass('open');
}
}
]
});
introJs().setOption('showBullets', false).setOptions({ scrollToElement: false }).start();
});
</script>