title: How to stop Bootstrap Tour from moving onto next step unless conditions pass
body: <p>I have 3 divs first two are visible, and then 3rd one is hidden, in each of first 2 there is a button that when you press it hides the div, and when both are hidden 3rd one becomes visible.
  The issue is how can I "disable" the next button if div1 or div2 is visible.</p>
  
  <p>I have tried using the onHide, onShow but it either don't function or i get stuck in infinite loop.</p>
  
  <p>What would be the correct way to add this functionality.</p>
  
  <p>Edit:
  HTML</p>
  
  <pre><code>    &lt;div id="myDiv1"&gt;
      &lt;button id="b1" onclick="$('#myDiv1').hide(); testForHidden()"&gt;Button1&lt;/button&gt;
      &lt;div id="myDiv1"&gt;
      &lt;button id="b2" onclick="$('#myDiv2').hide(); testForHidden()"&gt;Button2&lt;/button&gt;
      &lt;div id="myDiv3" style="display:none"&gt;
      &lt;button id="b3" onclick="$('#myDiv3').hide();"&gt;Button3&lt;/button&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var tour = new Tour({
    storage : false,
    steps: [],
    backdrop : false
  });
  
  tour.addSteps([
    {
      element: "#myDiv1", // string (jQuery selector) - html element next to which the step popover should be shown
      title: "Title1", // string - title of the popover
      content: "content 1", // string - content of the popover
      placement : "bottom"
      },
    {
      element: "#myDiv2",
      title: "Title 2",
      content: "content 2",
      placement : "bottom",
    //  Trying to make it freeze on second tour step if the elements are not hidden, since the step 3 belongs to element that only becomes visible when the previous 2 are hidden
  
    },
    {
      element: "#myDiv3",
      title: "Title 3",
      content: "content 3",
      backdrop: true,
      placement : "bottom"
    },
  // Initialize the tour
   tour.init();
  
   // Start the tour
   tour.start();
  
  function testForHidden(){
   if(document.getElementById("myDiv1").style.display == "none" &amp;&amp; document.getElementById("myDiv2").style.display == "none"){
  $("#myDiv3").show();
  }
  }
  </code></pre>