title: Bootstrap tour after another step
body: <p>I am stuck here. I am using Bootstrap tour to create a walk through but not getting the desired results. Here is the problem:</p>
  
  <p>I want the tour to start.
  (step 1: click Hello to continue). 
  The tour now pauses. 
  User clicks "Hello" and another div appears. 
  Then the tour should resume from step 2. </p>
  
  <p>If the div is visible by default, the tour works fine. But if the div display gets enabled in another step, the tour does not work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var tour;
    $("#get").click(function() {
  
      $("#get1").css('display', 'block');
  
  
    });
  
  
    $("#hello").click(function() {
  
      tour = new Tour({
        steps: [{
            element: "#get",
            title: "Step 1",
            content: "Click Hello to continue!"
          },
          {
            element: "#get1",
            title: "Step 2",
            content: "Great!"
          }
        ],
        storage: false
      });
  
      // Initialize the tour
      tour.init();
  
      // Start the tour
      tour.start();
  
  
    });
  
  
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Sam&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"&gt;
    &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.min.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;button type="button" id="hello" class="btn"&gt;Test&lt;/button&gt;
    &lt;div id="get" style="width: 50px"&gt;Hello&lt;/div&gt;
    &lt;div id="get1" style="background-color: tomato; display: none; width: 50px"&gt;test&lt;/div&gt;
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript" src="Sam.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>