title: Javascript : How to display a default tab content but hide other tab content
body: <p>I  have tabs created via <code>&lt;button&gt;</code> and the content of those tabs are in separate <code>&lt;div&gt;&lt;/div&gt;</code> like this :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function openInfo(evt, toolsName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");         
      for (i = 0; i &lt; tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i &lt; tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(toolsName).style.display = "block";
      evt.currentTarget.className += " active";                
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="tablinks" onclick="openInfo(event, 'Tab1')"&gt;Tab1&lt;/button&gt;
  &lt;button class="tablinks" onclick="openInfo(event, 'Tab2')"&gt;Tab2&lt;/button&gt;
  
  &lt;div id="Tab1" class="tabcontent"&gt;
      &lt;h5&gt;Title&lt;/h5&gt;
      &lt;div class="a"&gt;
          &lt;p&gt;Content&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
      </p>
  
  <p>but it hides all the contents by default. I'd like Tab1 to be displayed by default first. how do i modify the script?</p>