title: How to hide multiple Show/Hide DIV's when another DIV is clicked
body: <p>How do I hide all buttons in the second and third row if a different button is clicked in the first row and if a another button is clicked in the second row it will hide the buttons for that column and show buttons for the column that is clicked? I'm trying to achieve a form similar to <a href="http://gazelle.com/" rel="nofollow">http://gazelle.com/</a> for my website but it's getting a bit difficult for me.</p>
  
  <p>Example: If I click, "iPhone" -- buttons iphone 5, iphone 4s, iphone 4, and iphone 3gs show, then click, "iphone 5" -- buttons at&amp;t, sprint, verizon, unlocked, and other show under the first row, then I change my mind and decide to click "tablet" in the first, the buttons for "tablet" show up but the buttons from iphone 5 go back to hiding but the buttons for "tablet" show up.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;html xmlns=" http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  
      &lt;script type="text/javascript"&gt;
          function showHide(obj) {
              var div = document.getElementById(obj);
              if (div.style.display == 'none') {
                  div.style.display = '';
              }
              else {
                  div.style.display = 'none';
              }
          }
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;table&gt;
          &lt;td&gt;
          &lt;a href="#" onclick="showHide('hidden_div'); return false;"&gt;&lt;button&gt;iPhone&lt;/button&gt;&lt;/a&gt;
          &lt;a href="#" onclick="showHide('q2'); return false;"&gt;&lt;button&gt;iPod&lt;/button&gt;&lt;/a&gt;
          &lt;a href="#" onclick="showHide('q3'); return false;"&gt;&lt;button&gt;Tablet&lt;/button&gt;&lt;/a&gt;
          &lt;/td&gt;
      &lt;/table&gt;
  
      &lt;div id="hidden_div" style="display: none;"&gt;
          &lt;button onclick="showHide('q4'); return false;"&gt;iPhone 5&lt;/button&gt;
          &lt;button&gt;iPhone 4S&lt;/button&gt;
          &lt;button&gt;iPhone 4&lt;/button&gt;
          &lt;button&gt;iPhone 3GS&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div id="q2" style="display: none;"&gt;
          &lt;button&gt;iPod Touch&lt;/button&gt;
          &lt;button&gt;iPod Nano&lt;/button&gt;
          &lt;button&gt;Classic iPod&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div id="q3" style="display: none;"&gt;
          &lt;button&gt;iPad&lt;/button&gt;
          &lt;button&gt;Windows&lt;/button&gt;
          &lt;button&gt;Nook&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div id="q4" style="display: none;"&gt;
          &lt;button onclick="showHide('q'); return false;"&gt;AT&amp;T&lt;/button&gt;
          &lt;button&gt;Sprint&lt;/button&gt;
          &lt;button&gt;Verizon&lt;/button&gt;
          &lt;button&gt;Unlocked&lt;/button&gt;
          &lt;button&gt;Other&lt;/button&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/EbbCc/" rel="nofollow">http://jsfiddle.net/EbbCc/</a></p>