同时显示/隐藏div数

Question

具有多个div。在页面底部，我有一个按钮。使用此按钮，我想同时打开或关闭所有div。这与其他职位不同。上一个div将被打开和关闭，然后下一个div将被打开和关闭

我具有按ID打开或关闭div的功能。现在，我尝试同时打开和关闭所有div，但现在使用类而不是id。但这不起作用。

<!-- Function to hide or open a div by Id >
function showOrHide(value) 
{ 
   if (document.getElementById(value).style.display == 'none') 
  { 
    document.getElementById(value).style.display = 'block'; 
  } 
  else 
  { 
    document.getElementById(value).style.display = 'none'; 
  } 
} 

<!-- Function to hide or open all divs at same time by class
function showOrHideAll(value) 
{ 
   if (document.getElementsByClassName(value).style.display == 'none') 
  { 
    document.getElementsByClassName(value).style.display = 'block'; 
  } 
  else 
  { 
    document.getElementsByClassName(value).style.display = 'none'; 
  } 
} 

<button id = "button" onclick="showOrHide('General')" class="button1"  name= "bGeneral" ><b>General</b></button> 

    <!-- Insert a table in a div, so this can be hide -->
    <div id="General">
      <table style="width:50%;margin-left:50px;" >
        <colgroup>
        <col span="3" style="background-color:#E3CEF6;">        
        </colgroup>
   <tr>
    <td width="10%">      
    </td>
    <td width="30%">Protocol name(s) : </td>
    <td width="40%"><input type="text" id="Protname" name="Protocol name(s)" size="35"> </td>
    <td width="10%"></td>
    <td width="10%"></td>
   </tr>
  <tr>
    <td>      
    </td>
    <td>Order name(s):</td>
    <td><input type="text" name="Order name(s)" size="35"></td> 
    <td></td>
    <td></td>   
  </tr> 

  </table>
 </div>
<!-- Create extra space -->
<p><br></p> 

<!-- The Next Button Plates -->
<button id = "buttonP" onclick="showOrHide('Plates')" class="button1" name= "buttonP" ><b>Plates</b></button> 
<!-- Insert a table in a div, so this can be hide -->
 <div id="Plates">
<br>    
<div id="CompoundPlates_button">
 <table style="width:20%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr>
    <td width="20%"><input type="button" id = "buttonCP" name="buttonCP" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('CompoundPlates')">      
    </td>
    <td width="40%"><b>CompoundPlates</></td>
    <td width="15%"></td> 
    <td width="15%"></td>
    <td width="10%"></td>   
  </tr> 
  </table>
 </div> <!-- Close Div CompoundPlates_button --> 
         <!-- Insert a table in a div, so this can be hide -->
 <div id="CompoundPlates">
   <table style="width:50%;margin-left:50px;" >
        <colgroup>
        <col span="3" style="background-color:#E3CEF6;">        
        </colgroup>
   <tr>
    <td  width="50">      
    </td>
    <td  width="300">Number of Plates:</td>
    <td  width="100"><input type="text" name="Number of plates" size="55"></td> 
    <td  width="20"></td>
    <td  width="20"></td>   
  </tr> 
  <tr>
    <td>      
    </td>
    <td>Plate/Tip type :</td>
    <td><input type="text" name="Plate/Tip type" size="35"></td> 
    <td></td>
    <td></td>   
  </tr> 
  <tr>
    <td>
    </td>
    <td>Lid : </td>
    <td><input type="text" name="Lid" size="35"> </td>
    <td></td>
    <td></td>
   </tr>

 </table>
 </div> <!-- Close div CompoundPlates -->
<div id="AssayPlates_button">
 <table style="width:20%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr>
    <td width="20%"><input type="button" id = "buttonAP" name="buttonAP" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('AssayPlates')">      
    </td>
    <td width="40%"><b>AssayPlates</></td>
    <td width="15%"></td> 
    <td width="15%"></td>
    <td width="10%"></td>   
  </tr> 
  </table>
  </div> <!-- Close Div AssayPlates_button -->   
<div id="AssayPlates">
     <table style="width:50%;margin-left:50px;" >
        <colgroup>
        <col span="3" style="background-color:#E3CEF6;">        
        </colgroup>
    <tr>
    <td width="10%">      
    </td>
    <td width="20%">Number of Plates:</td>
    <td width="30%"><input type="text" name="Number of platesAP" size="35"></td> 
    <td width="20%"></td>
    <td width="20%"></td>   
  </tr> 
  <tr>
    <td>      
    </td>
    <td>Plate/Tip type :</td>
    <td><input type="text" name="Plate/Tip typeAP" size="35"></td> 
    <td></td>
    <td></td>   
  </tr> 
  <tr>
    <td>
    </td>
    <td>Lid : </td>
    <td><input type="text" name="LidAP" size="35"> </td>
    <td></td>
    <td></td>
   </tr>

  </table>
  </div> <!-- Close div AssayPlates -->
  </div> <!-- Close div Plates -->

全部打开/关闭

期望能够同时打开或关闭所有div