Intro.js onbeforechange function, cannot go to the step that in actual behaviour we have to click to see that part

105 views Asked by At

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>
0

There are 0 answers