Conditional intro for elements which are not displayed initially

[Prshant-Sharma]

I have a scenario where some HTML elements displayed only upon some conditions.

How can we write steps for that particular element?

Below is my code:

introJs().setOptions({
    ...DEFAULT_TOUR_CONFIG,
    steps: [
      {
        title: 'My title',
        intro: 'Lorem ipsum dolor',
        element: '#element-1',
      },
      {
        title: 'My title',
        intro: 'Lorem ipsum',
        element: '#element-2',
      },
    ],
  }).onstart(() => {
    return new Promise(resolve => {
      setInterval(resolve, 500);
    });
}).start();

Suppose my element-2 will display only in some condition, how can I force the introJs not to iterate it until that condition satisfy?

I tried to make ternary operator something like below:

 steps: [
    {
      title: 'My title',
      intro: 'Lorem ipsum dolor',
      element: '#element-1',
    },
    ...(conditionToSatisfy ? {
      title: 'My title',
      intro: 'Lorem ipsum',
      element: '#element-2',
    } : {}),
 ],

but this gives me the following error: Type '{ title: string; intro: string; element: string; } | {}' must have a '[Symbol.iterator]()' method that returns an iterator.

Please assist here. Looking forward for some idea to achieve this.

[Arashturk]

If you want to display tour steps conditionally based on certain elements, and you're facing issues because some of the elements might not be visible under specific conditions, you can dynamically determine which elements to include in the intro.js tour. To do this, you can write a function that selects the desired elements based on the required conditions and then pass those elements to intro.js. Here's an example of how to achieve this in JavaScript:

`function startTour() { const steps = [];

// Condition to display Step 1 if (/ Condition for Step 1 /) { steps.push({ title: 'Step 1', intro: 'This is step 1', element: '#element-1', }); }

// Condition to display Step 2 if (/ Condition for Step 2 /) { steps.push({ title: 'Step 2', intro: 'This is step 2', element: '#element-2', }); }

// Create the tour with the specified steps introJs().setOptions({ ...DEFAULT_TOUR_CONFIG, steps: steps, }).onstart(() => { return new Promise(resolve => { setInterval(resolve, 500); }); }).start(); }

// Call the function to start the tour startTour();`

[Prshant-Sharma]

If you want to display tour steps conditionally based on certain elements, and you're facing issues because some of the elements might not be visible under specific conditions, you can dynamically determine which elements to include in the intro.js tour. To do this, you can write a function that selects the desired elements based on the required conditions and then pass those elements to intro.js. Here's an example of how to achieve this in JavaScript:

`function startTour() { const steps = [];

// Condition to display Step 1 if (/ Condition for Step 1 /) { steps.push({ title: 'Step 1', intro: 'This is step 1', element: '#element-1', }); }

// Condition to display Step 2 if (/ Condition for Step 2 /) { steps.push({ title: 'Step 2', intro: 'This is step 2', element: '#element-2', }); }

// Create the tour with the specified steps introJs().setOptions({ ...DEFAULT_TOUR_CONFIG, steps: steps, }).onstart(() => { return new Promise(resolve => { setInterval(resolve, 500); }); }).start(); }

// Call the function to start the tour startTour();`

@Arashturk thanks for your efforts. Its working!!!