title: How to use hide function inside if statement
body: <p>When I click <code>.dot</code> element it should query database and show the result, and in second click it should hide the result. However it just show nothing in first click.</p>
  
  <p>When I leave second <code>if</code> empty it successfully  queries the database and show the result. But when I add  this code <code>$(".conte").hide();</code> to second <code>if</code> it shows nothing in click.</p>
  
  <p>here is the code:</p>
  
  <pre><code>$(document).ready(function() {
    var do1 = 0;
    var do2 = 0;
    var do3 = 0;
    var do4 = 0;
  
    $('.dot1').click(function() {
  
      if (do1 == 0) {
        do2 = 0; // for other function
        do3 = 0; // for other function
        do4 = 0; // for other function
        do1 = 1;
  
        $.ajax({
          type: "POST",
          url: "query1.php",
          success: function(data) {
            $(".conte").html(data);
          }
        });
      }
      if (do1 == 1) {
        $(".conte").hide();
        do1 = 0;
        //hide me
      }
      // $(this).toggleClass('clicked');
    });
  });
  </code></pre>