title: Hide / Show tab contents based on PHP variable value
body: <p>I include one tab and display corresponding contents when user click on the tab. Here is the code for tab and contents.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="tabs" id="tab"&gt;
      &lt;li rel="tab1"&gt;&lt;a id="t1" href="#" title="Login via 2FA" class="&lt;?php echo $FAActive; ?&gt;" onclick="CngClass(this);"&gt;Login via 2FA&lt;/a&gt;&lt;/li&gt;
      &lt;?php if ($useSMS == true) { ?&gt;
          &lt;li rel="tab2"&gt;&lt;a id="t2" href="#" title="Login via SMS" class="&lt;?php echo $SMSActive; ?&gt;" onclick="CngClass(this);"&gt;Login via SMS&lt;/a&gt;&lt;/li&gt;
      &lt;?php } ?&gt;
  &lt;/ul&gt;
  &lt;form method="post" action="&lt;?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?&gt;"&gt;
      &lt;div id="tab1" class="tab_content"&gt; 
          &lt;div class="form_settings"&gt;
              &lt;h3&gt;Secure Login via 2FA&lt;/h3&gt;
              &lt;p&gt;Please use your 2FA device (mobile phone or computer).
              &lt;p&gt;Enter the security code: &lt;input type="text" name="otp" value="" /&gt;
              &lt;p&gt;&lt;input class="submit" type="submit" name="2FAlogin" value="Enter" /&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!-- #tab1 --&gt;
      &lt;div id="tab2" class="tab_content"&gt; 
          &lt;div class="form_settings"&gt;
              &lt;h3&gt;Secure ID from SMS&lt;/h3&gt;
              &lt;p&gt;Please click on the button "Resend SMS".
              &lt;p&gt;The system will send SMS-OTP to your mobile number (&lt;?php echo $MobileNumber; ?&gt;). 
              &lt;p style="margin-bottom: 15px;"&gt;SMS-OTP Code: &lt;input type="text" name="passcode" value="" /&gt;&lt;/p&gt;
              &lt;p&gt;
                  &lt;input class="submit" type="submit" name="SMSlogin" value="Sign In" /&gt;
                  &lt;input class="submit" type="submit" name="Resend" value="Resend SMS" /&gt;
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!-- #tab2 --&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Javacsript</p>
  
  <pre><code>    &lt;script type="text/javascript" src="modernizr-1.5.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;&lt;script type="text/javascript"&gt;
  
          $(document).ready(function () {
  
              $(".tab_content").hide();
              $(".tab_content:first").show();
  
  
              $("ul.tabs li").click(function () {                    
                  $("ul.tabs li").removeClass("active");
                  $(this).addClass("active");
                  $(".tab_content").hide();
                  var activeTab = $(this).attr("rel");
                  $("#" + activeTab).fadeIn();
              });
          });
  
          function CngClass(obj) {
              var list = document.getElementById("tab").getElementsByTagName('a');
  
              for (i = 0; i &lt; list.length; i++)
              {
                  list[i].className = '';
              }
  
              obj.className = 'active';
          }
  
          /*]]&gt;*/
      &lt;/script&gt;
  </code></pre>
  
  <p>PHP</p>
  
  <pre><code>if (isset($_POST['Resend'])) {
      $FAActive = "";
      $SMSActive = "active";
  }
  
  if (isset($_POST['2FAlogin'])) {
      $FAActive = "active";
      $SMSActive = "";
  }
  </code></pre>
  
  <p>I need to display the content based on this <code>$FAActive</code>, <code>$SMSActive</code>. Whenever I refresh the page, its tab content will display by default. I would like to change this to, for <code>$FAActive</code> is active then selected tab will be tab1 and for <code>$SMSActive</code> selected tab will be tab2.</p>
  
  <p>I put this code inside javascript <code>&lt;?php if(!empty($FAActive)) { ?&gt; $(".tab_content:first").show(); &lt;?php } else { ?&gt; $(".tab_content:second").show(); &lt;?php } ?&gt;</code>  But it won't display anything. Anybody Please help me to resolve this.</p>