IntroJS Bootstrap Menu doesn't work

Question

I\'m using bootstrap for UI Design. I have configured updated IntroJS to my site. Now it works fine with other elements but giving problem with Dropdown Menu Elements.

<

Answer 1

I've had the same issue and I manage to resolve it, I posted an explanation there:

use intro.js on bootstrap dropdown element

Hope these help.

---

EDIT: Added snippet of code and explanation from link

I found a workaround, it's quite ugly, but does the job:

$scope.ChangeEvent = function (e) { 
    if (e.id === 'step2') {
        document.getElementById('step1').click();
        setTimeout(function () {
            document.getElementById('step2').style.display = 'block';
        }, 500);
    } 
    console.log("Change Event called"); 
};

I set the display attribute to block just after the click event I added in the change event

When clicking executing the click on the element 1, I noticed that jquery set the state of the style.display of the element 2 to '', so I wait a bit after clicking in order to set it back to 'block', I know it's ugly, but I didn't find anything better at the time