Multiple tour on single page

[pramod1988]

hi, i am creating multiple tour of single page with different event,but if end one tour other tour is not visible. Can you help me in this? Here's my code :-

 // Instance the tour
            var tour = new Tour({
              keyboard: true,
              backdrop: true,
              steps: [
              {
                element: "#exp-tour",
                placement: "top",
                title: "Add Expense",
                content: "You can record your actual expense transactions from this form. <br/>For Eg. You paid for your Mobile  Bill of Rs. 567.00 in Cash Or You paid for your Electricity Bill of Rs.1395.00 by Cheque"
              },
              {
                element: "#inc-tour",
                placement: "top",
                title: "Add Income",
                content: "You can record your actual income transactions from this form. <br/> For Eg. You received a Salary of Rs.15,000 in Cash Or You received Interest on Your Savings Bank Account of Rs.126.00 in your bank account"
              }

            ]});

            tour.init();
            tour.restart();

       // Instance the tour1
            var tour1 = new Tour({
              keyboard: true,
              backdrop: true,
              steps: [
              {
                element: "#income_modal",
                placement: "top",
                title: "Intro",
                content: "Record all your incomes from various sources from here."
              },
              {
                element: "#inc-day",
                placement: "top",
                title: "Date",
                content: "This is the date on which the transaction has been effected."
              }
            ]});

       // Instance the tour2
            var tour2 = new Tour({
              keyboard: true,
              backdrop: true,
              steps: [
              {
                element: "#expense_modal",
                placement: "top",
                title: "Income area",
                content: "You can record and see your Incomes from various sources here. All at one place."
              }
            ]});

[agentpx]

Experiment with this.

tour.init(); tour.restart(); // Added this tour.start();

[sorich87]

Use onEnd callback in the first tour to start the second one and in the second tour to start the third one and so on....

[adamgins]

@sorich87 thanks

I am using the callback onEnd. I see the second tour flash on the screen, then dissapears from the dom( I inspected via dev tool). If I resize the browser, it re-appears.

I tried .start(true) and restart() but no luck.

Any ideas pls?