title: Browser Plugin Tabs - how to show one and hide the other?
body: <p>I have a prototype browser plugin which opens a popup window, I want to display the main page but have the option to switch to another tab to alter preferences. Currently I can only get it to display the forms for both tabs or display nothing, depending on where I put the 'display:none' part. Here is my code, which currently shows all the options and clicking tab buttons does nothing, any help appreciated.</p>
  <pre><code>&lt;header class=&quot;panel-section panel-section-header&quot;&gt;
      &lt;div class=&quot;icon-section-header&quot;&gt;&lt;!-- An image goes here. --&gt;&lt;/div&gt;
      &lt;div class=&quot;text-section-header&quot;&gt;Privacy Tool Header&lt;/div&gt;
  &lt;/header&gt;
  
  &lt;div class=&quot;panel-section panel-section-tabs&quot;&gt;
      &lt;button class=&quot;panel-section-tabs-button selected&quot; onclick=&quot;showHide(Home)&quot;&gt;Home&lt;/button&gt;
      &lt;button class=&quot;panel-section-tabs-button&quot; onclick=&quot;showHide('Preferences')&quot;&gt;Preferences&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div id=&quot;Home&quot; class=&quot;tabcontent&quot;&gt;
      &lt;div class=&quot;panel-section panel-section-formElements&quot;&gt;
          &lt;div class=&quot;panel-formElements-item&quot;&gt;
              &lt;label for=&quot;content&quot;&gt;What would you like to post?&lt;/label&gt;
              &lt;select id=&quot;content&quot;&gt;
                  &lt;option value=&quot;default&quot; selected=&quot;true&quot;&gt;&lt;/option&gt;
                  &lt;option value=&quot;text&quot;&gt;Text&lt;/option&gt;
                  &lt;option value=&quot;image&quot;&gt;Image&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class=&quot;panel-formElements-item&quot;&gt;
              &lt;label for=&quot;network&quot;&gt;Where would you like to post it?&lt;/label&gt;
              &lt;select id=&quot;network&quot;&gt;
                  &lt;option value=&quot;default&quot; selected=&quot;true&quot;&gt;&lt;/option&gt;
                  &lt;option value=&quot;facebook&quot;&gt;Facebook&lt;/option&gt;
                  &lt;option value=&quot;twitter&quot;&gt;Twitter&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id=&quot;Preferences&quot; class=&quot;tabcontent&quot;&gt;
      &lt;div class=&quot;panel-section panel-section-formElements&quot;&gt;
          &lt;div class=&quot;panel-formElements-item&quot;&gt;
              &lt;label for=&quot;location&quot;&gt;Share your location?&lt;/label&gt;
              &lt;select id=&quot;location&quot;&gt;
                  &lt;option value=&quot;default&quot; selected=&quot;true&quot;&gt;&lt;/option&gt;
                  &lt;option value=&quot;yes&quot;&gt;Yes&lt;/option&gt;
                  &lt;option value=&quot;no&quot;&gt;No&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class=&quot;panel-formElements-item&quot;&gt;
              &lt;label for=&quot;self&quot;&gt;Share photos of yourself?&lt;/label&gt;
              &lt;select id=&quot;self&quot;&gt;
                  &lt;option value=&quot;default&quot; selected=&quot;true&quot;&gt;&lt;/option&gt;
                  &lt;option value=&quot;yes&quot;&gt;Yes&lt;/option&gt;
                  &lt;option value=&quot;no&quot;&gt;No&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src=&quot;options.js&quot;&gt;&lt;/script&gt;
  &lt;/div&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
  function showHide(tab) {
      var tabs = document.getElementsByClassName('tabcontent')
      for (var i = 0; i &lt; tabs.length; i++) {
          tabs[i].style.display = 'none';
      }
  
      document.getElementById(tab.id.replace(/(\d)/g, '-1$')).style.display = 'block';
  }
  &lt;/script&gt;
  
  &lt;footer class=&quot;panel-section panel-section-footer&quot;&gt;
      &lt;button class=&quot;panel-section-footer-button&quot;&gt;Cancel&lt;/button&gt;
      &lt;div class=&quot;panel-section-footer-separator&quot;&gt;&lt;/div&gt;
      &lt;button class=&quot;panel-section-footer-button default&quot;&gt;Go&lt;/button&gt;
  &lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>