Go to next step on click of an element in introJS

Question

I am building an application using angularjs in which i am using intro.js for product tour.

I have a requirement that when the user clicks on a specific element, intro.js should focus on that particular element irrespective of the next element.

So if the user is on element 1 within the tour, and clicks on element 3, the user should navigate to element 3 skipping element 2.

How can I achieve this functionality?

Answer 1

Introjs has the goToStep method that goes to a specific step (introJs().goToStep(2).start()). You can use an event listener to listen for a click on an element, and start introjs from the element's associated step.

Example:

var intro = introJs();
    intro.setOptions({
        steps: [
            {
                element: '#step1',
                intro: 'Intro #2 text',        
            },
            {
                element: '#step2',
               intro: "Intro #2 text",     
            }]
})


$('.element-to-watch').on('click', function() {
    intro.exit(); // 
    if ($(this).attr("id") != 'step1') {
        let num =  $(this).attr("id").match(/\d+/)[0];
        intro.goToStep(num-1).start();
    }
    else {
        intro.start();
    }
});