title: How to set a default active/open tab in html
body: <p>I'm currently working on a Skill Test project that displays one question on each tab. How can I set the default active tab? I have code for default open tab which I just copied form w3schools.com, but it wont work. I don't have an idea why. I hope someone can help me fix my code since Im new to these. Thank you so much!</p>
  <p>Style:</p>
  <pre><code>.button {
      display: inline-block;
      margin: 4px 2px;
      border-radius: 8px;
  }
  
  div.tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
  }
  
  div.tab button {
      background-color: inherit;
      float: left;
      border: 1px solid #ccc;
      outline: none;
      cursor: pointer;
      padding: 13px 12.62px;
      transition: 0.3s;
      font-size: 10px;
  }
  
  div.tab button:hover {
      background-color: #ddd;
  }
  
  div.tab button.active {
      background-color: #d6f5d6;
  }
  
  .tabcontent {
      display: none;
      border: 1px solid #ccc;
      border-top: none;
  }
  </code></pre>
  <p>Body:</p>
  <pre><code>&lt;div class=&quot;col-md-auto col-md-offset-1 col-centered&quot;&gt;
      &lt;div class=&quot;panel panel-success&quot;&gt;
          &lt;script&gt;
          function openTab(evt, tabName) {
              var i, tabcontent, tablinks;
              tabcontent = document.getElementsByClassName(&quot;tabcontent&quot;);
              for (i = 0; i &lt; tabcontent.length; i++) {
                  tabcontent[i].style.display = &quot;none&quot;;
              }
              tablinks = document.getElementsByClassName(&quot;tablinks&quot;);
              for (i = 0; i &lt; tablinks.length; i++) {
                  tablinks[i].className = tablinks[i].className.replace(&quot; active&quot;, &quot;&quot;);
              }
              document.getElementById(tabName).style.display = &quot;block&quot;;
              evt.currentTarget.className += &quot; active&quot;;
          }
          document.getElementById(&quot;defaultOpen&quot;).click();
  
          &lt;/script&gt;
  
          &lt;div class=&quot;tab&quot;&gt;
            &lt;button class=&quot;tablinks&quot; type=&quot;button&quot; onclick=&quot;openTab(event, 'q1')&quot; id=&quot;defaultOpen&quot;&gt;&lt;/button&gt;
            &lt;button class=&quot;tablinks&quot; type=&quot;button&quot; onclick=&quot;openTab(event, 'q2')&quot;&gt;&lt;/button&gt;
            &lt;button class=&quot;tablinks&quot; type=&quot;button&quot; onclick=&quot;openTab(event, 'q3')&quot;&gt;&lt;/button&gt;        
  
          &lt;?php if (mysqli_num_rows($result) &gt; 0): ?&gt;
          &lt;?php $index = 0; $num=0; ?&gt;
                  &lt;div id=&quot;q&lt;?php echo ($index++); ?&gt;&quot; class=&quot;tabcontent&quot;&gt;
                      &lt;table class=&quot;table table-hover&quot;&gt;
                      &lt;tbody&gt;
                          &lt;tr class=&quot;form-group&quot;&gt;   
                              &lt;h3 name=&quot;ques[&lt;?php echo $test_id;?&gt;]&quot; style=&quot;text-indent: 40px;&quot;&gt; &lt;?php echo $num,'. ', $question; ?&gt; &lt;/h3&gt;
                          &lt;/tr&gt;
                          &lt;tr class=&quot;form-group&quot;&gt;
                              &lt;label class=&quot;radio-inline&quot; style=&quot;text-indent: 70px; font-size: 18px;&quot;&gt;
                                   &amp;nbsp;&amp;nbsp;&lt;input style=&quot;font-size: 18px;&quot; type=&quot;radio&quot; name=&quot;ans[&lt;?php echo $test_id;?&gt;]&quot; value=&quot;&lt;?php echo $optiona;?&gt;&quot;&gt;&lt;?php echo $optiona;?&gt; 
                              &lt;/label&gt;
                              &lt;br&gt;
                              &lt;label class=&quot;radio-inline&quot; style=&quot;text-indent: 70px; font-size: 18px;&quot;&gt;
                                   &amp;nbsp;&amp;nbsp;&lt;input style=&quot;font-size: 18px;&quot; type=&quot;radio&quot; name=&quot;ans[&lt;?php echo $test_id;?&gt;]&quot; value=&quot;&lt;?php echo $optionb;?&gt;&quot;&gt;&lt;?php echo $optionb; ?&gt; 
                              &lt;/label&gt;
                              &lt;br&gt;
                              &lt;label class=&quot;radio-inline&quot; style=&quot;text-indent: 70px; font-size: 18px;&quot;&gt;
                                   &amp;nbsp;&amp;nbsp;&lt;input style=&quot;font-size: 18px;&quot; type=&quot;radio&quot; name=&quot;ans[&lt;?php echo $test_id;?&gt;]&quot; value=&quot;&lt;?php echo $optionc;?&gt;&quot;&gt;&lt;?php echo $optionc;?&gt; 
                              &lt;/label&gt;
                              &lt;br&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                      &lt;/table&gt;
                      &lt;br&gt;  
                  &lt;/div&gt;
              &lt;?php $num++; ?&gt;
          &lt;?php endif ?&gt;
         &lt;/form&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>