title: Making a div and a button appear in a JavaScript function together
body: <p>I have a test that runs a series of trials, and if the user gets a certain amount of answers wrong, then it should show a warning message and a restart button. The function is here below. I have put the JQuery calls inside the JS check function. Strangely, only the restart button is showing, and even more strange is that when I click the restart button, then the warning text appears. </p>
  
  <pre><code>function checkWrongAnswers() {
      if (wrongAnswers == 1) {
          clearInterval(theTask);
          $("#warning").toggle();
          $(".btn[name=restartANT]").show();
      }
  }
  </code></pre>
  
  <p>The JQuery code for when the restart button is clicked is below. I show the instructions page and hide the restart button, and show the forward button. I don't understand why the error text appears after the restart button is clicked, and not before.</p>
  
  <pre><code>    $(".btn[name=restartANT").click(function() {
          $("#antInstructions01").toggle();
          $(".btn[name=restartANT").hide();
          $("#forwardBtn").toggle();
      });
  </code></pre>