title: Hide and show multiple html elements using javascript
body: <p>I have some tables here, and using this <strong>javascript</strong> below, I made them <strong>hide and show</strong> every time a user click on their <strong>buttons</strong>. What I want to add in to this script, is when someone click on a table's button to show-up, all the other to be hidden. Any idea how can I do this? Thank you in advance!</p>
  
  <p><strong>This is my html code:</strong></p>
  
  <pre><code>&lt;table id="SC1_TH_" class="header_op"&gt;&lt;tr&gt;&lt;td&gt;
  &lt;div id="SC1_BSH_" onClick="SC[1]();" class="hide_button"&gt;*&lt;/div&gt;OPTION ONE
  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;div id="SC1_BO_" style="display:dlock;"&gt;BLAH BLAH&lt;/div&gt;
  
  &lt;table id="SC2_TH_" class="header_cl"&gt;&lt;tr&gt;&lt;td&gt;
  &lt;div id="SC2_BSH_" onClick="SC[2]();" class="show_button"&gt;*&lt;/div&gt;OPTION ONE
  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;div id="SC2_BO_" style="display:none;"&gt;BLAH BLAH&lt;/div&gt;
  
  &lt;table id="SC3_TH_" class="header_cl"&gt;&lt;tr&gt;&lt;td&gt;
  &lt;div id="SC3_BSH_" onClick="SC[3]();" class="show_button"&gt;*&lt;/div&gt;OPTION ONE
  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;div id="SC3_BO_" style="display:none;"&gt;BLAH BLAH&lt;/div&gt;
  </code></pre>
  
  <p><strong>This is my javascript:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var SC = [];
  
  for (var i = 1; i &lt; 10; i++) {
  
  SC[i] = (function(i){
  
  return function(){
  
  var SC_TH  = document.getElementById('SC'+i+'_TH_');
  var SC_BSH = document.getElementById('SC'+i+'_BSH_');    
  var SC_BO  = document.getElementById('SC'+i+'_BO_');
  
    if (SC_BO.style.display == 'block' || SC_BO.style.display == ''){
        SC_TH.className      = 'header_cl';
        SC_BSH.className     = 'show_button';
        SC_BO.style.display  = 'none';}
  else {SC_TH.className      = 'header_op';
        SC_BSH.className     = 'hide_button';
        SC_BO.style.display  = 'block';}
       }})(i);}       
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p>EDIT: In other words, I need something to say, <strong>if</strong> this button that <strong>clicking</strong> right now is <strong>something</strong> all the <strong>other</strong> to be <strong>hidden</strong>!!!</p>