title: If/Else Statement does not run the else
body: <p><a href="https://jsfiddle.net/messedUP90/pm2e8dyb/2/" rel="nofollow">Here is my JSFiddle</a>:</p>
  
  <p>I am struggling with my If/Else statement. I cannot get the else part of the statement to run. I assume it is something with the ordering... but nothing I try has been helping. </p>
  
  <p>What I want to happen: click the pink button and the small pink appears. click the green button the little green box appears and the pink disappears.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div id="pport01"&gt;&lt;/div&gt;
  &lt;div id="pport02"&gt;&lt;/div&gt;
  &lt;div class="p01"&gt;&lt;/div&gt;
  &lt;div class="p02"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is the css:</p>
  
  <pre><code>#pport01{
      position:relative;
      display: inline-block;
      width: 100px;
      height:100px;
      background-color: pink;
      cursor: pointer;
  }
  
  #pport02{
      position:relative;
      display: inline-block;
      width: 100px;
      height:100px;
      background-color: green;
      cursor: pointer;
  }
  
  .p01{
      position:relative;
      display: none;
      width: 10px;
      height:10px;
      background-color: pink;
      display: none;
  
  }
  
  .p02{
      position:relative;
      display:none;
      width: 10px;
      height:10px;
      background-color: green;
  }
  </code></pre>
  
  <p>Here is the JS:</p>
  
  <pre><code>var active01 = false;
  var active02 = false;
  
  $('#pport01').click(function(){
      active02= false;
      active01 = true;
      if(active01){
          console.log(active01 + "port1 true");
          $('.p01').fadeIn("slow");
      }else{
          console.log(active01 + "port1 false");
          $('.p02').fadeOut("slow");
      }
  });
  
  $('#pport02').click(function(){
      active01 = false;
      active02 = true;
      if(active02){
          console.log(active02 + "port2 true");
          $('.p02').fadeIn("slow");
      }else{
          console.log(active02 + "port2 false");
          $('.p02').fadeOut("slow");
      }
  });
  </code></pre>
  
  <p>It turns out I did not want the if/else statement there. Thank you everyone for your help!
  <a href="https://jsfiddle.net/messedUP90/yfvkjwLh/" rel="nofollow">It works now!</a> </p>